イオン範囲のイオン3標識が切り捨てられています

Question

私は、価格帯に$$$$$のテキストを持つイオンラベルを貼り付けようとしています。レンジはイオンメニューの中にあります。妙にこれを表示する

 <ion-item> 
      <ion-label>Price Range</ion-label> 
      <ion-range min="1" max="5" snaps="true" dualKnobs="true" pin="true" [(ngModel)]="priceRange" color="primary"> 
       <ion-label range-left>$</ion-label> 
       <ion-label range-right>$$$$$</ion-label> 
      </ion-range> 
     </ion-item> 

：：私はHTML、それだけが表示さ$$で$$$$$を持っているにもかかわらず

ここで私が持っているコードです。

何らかの理由で、複数の余分な$を入力すると表示が変わります。たとえば、次のように

 <ion-item> 
      <ion-label>Price Range</ion-label> 
      <ion-range min="1" max="5" snaps="true" dualKnobs="true" pin="true" [(ngModel)]="priceRange" color="primary"> 
       <ion-label range-left>$</ion-label> 
       <ion-label range-right>$$$$$$$$$$</ion-label> 
      </ion-range> 
     </ion-item> 

を表示し、この：

これは私が望む所望の表示ですが、それは私がそれを達成するために何をしたかしなければならない権利を思えません。

$$$$$を適切な方法で表示するにはどうすればよいですか？私は、幅、パディング、および境界線のプロパティを設定しようとしようとすると、ラベルをより多くのスペースを与えるが、それは何も影響しません。

ありがとうございます。

Answer 1

この方法で試すことができます。 、以下のようなあなたのコンポーネントファイル内の任意の変数を宣言し

symbol : any = '$$$$$'; 

、その後、あなたは以下のようにそれを使用することができ、

<ion-item> 
<ion-label>Price Range</ion-label> 
<ion-range min="1" max="5" snaps="true" dualKnobs="true" pin="true" [(ngModel)]="priceRange" color="primary"> 
<ion-label range-left>$</ion-label> 
<ion-label range-right>{{symbol}}</ion-label> 
</ion-range> 
</ion-item>