css - 如何在标签中始终保留两位小数并对齐价目表

Question

我正在实施一个离子移动应用程序。在我的组件的 typescript 类中，我有一个数字数组（价格）。有些是整数，有些是小数点后两位。我想在组件中将其显示为价目表列。为此，我使用对齐设置为正确。为了使价目表正确对齐，我需要用两位零小数显示整数。我怎样才能做到这一点

输入脚本

price1 = 21.23;
price2 = 20;

在 ionic 组件中的 html 中

<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

但事实并非如此。甚至文本都没有向右对齐。

有人可以建议我如何做到这一点。

标签： cssionic-framework

Answer 1

您可以使用DecimalPipe，如下所示：

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

您可以在文档中查看更多信息： https ://angular.io/api/common/DecimalPipe

以及在 Angular Wiki 中： https ://www.angularjswiki.com/angular/angular-decimal-pipe/

干杯!