Étiquette ionique ionique 3 sur la gamme ionique étant tronquée

Question

J'essaie de mettre une étiquette ionique portant le texte $$$$$ pour une fourchette de prix. La gamme est à l'intérieur d'un menu ionique. Voici le code que j'ai:

 <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> 

qui affiche curieusement ceci:

Même si je $$$$$ dans le html, il affiche uniquement $$.

Pour une raison quelconque, si je tape plusieurs dollars supplémentaires, l'affichage change. Par exemple:

 <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> 

Affiche ceci:

Bien que ce soit l'affichage désiré, je voudrais, il ne semble pas juste d'avoir à faire ce que je l'ai fait pour y parvenir.

Comment puis-je obtenir l'étiquette pour afficher $$$$$ correctement? J'ai essayé de définir les propriétés width, padding et border pour essayer de donner plus d'espace à l'étiquette mais cela n'affecte rien.

Nous vous remercions de votre temps.

Answer 1

Vous pouvez essayer de cette façon. Déclarer une variable dans votre fichier de composant comme ci-dessous,

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

et vous pouvez l'utiliser comme ci-dessous,

<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>