离子范围上的离子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中有$$$$$，它也只显示$$。

出于某种原因，如果我输入多个额外的$＆＃39;则显示会发生变化。例如：

        <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

You can try this way. Declare any variable in your component file like below,

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

and then you can use it like below,

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