css - 我怎么能总是在我的标签中有两位小数并对齐价目表

Question

我正在实现一个 ionic 移动应用程序。在我的组件的 typescript 类中，我有一个数字数组(价格)。有些是整数，有些是两位小数。我想在组件中将此显示为价目表的一列。为此，我使用对齐方式设置为右侧。为了使价目表正确对齐，我需要用两位小数显示整数。我怎样才能做到这一点
键入脚本

price1 = 21.23;
price2 = 20;

在 html 中的 ionic 组件

<ion-grid>
    <on-row>
      <ion-col>
         <ion-label class="ion-text-end">{{price1}}</ion-label>
      </ion-col>
    </on-row>
    <on-row>
      <ion-col>
         <ion-label class="ion-text-end">{{price2}}</ion-label>
      </ion-col>
    </on-row>

</ion-grid>

我希望它对齐为，

21.23
20.00

但事实并非如此。甚至文本都不会向右对齐。
有人可以建议我如何实现这一目标。

Answer 1

您可以使用 DecimalPipe ， 像这样:

{{ price2 | number : '1.2-2'}}

您可以在文档中查看更多信息:
https://angular.io/api/common/DecimalPipe
同样在 Angular Wiki 中:
https://www.angularjswiki.com/angular/angular-decimal-pipe/
干杯!