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/

干杯!