时间戳

首页 > 解决方案 > 角十进制管道不显示前导零？

angular - 角十进制管道不显示前导零？

问题描述

有没有办法在 Angular 中使用内置的十进制管道而不显示前导零？

我试图显示显示为 .xxx 而不是 0.xxx 的其他棒球击球率。只有在平均值等于或大于 1.000 时才会显示整数

他可以用十进制管道完成吗？如果没有，有人可以在自定义管道中展示一种快速的方法吗？

标签： angularangular-pipe

解决方案

这是一个从 派生的自定义管道，DecimalPipe当值小于 时，它会删除前导零1.000。默认情况下，它保留 3 个十进制数字：

import { Pipe } from "@angular/core";
import { DecimalPipe } from "@angular/common";

@Pipe({
  name: "battingAvg"
})
export class BattingAvgPipe extends DecimalPipe {
  transform(val: number, digitsInfo: string = "1.3-3", locale?: string) {
    const str = super.transform(val, digitsInfo, locale);
    return str.replace(/^0+([^\d])/, "$1");
  }
}

管道在组件模板中的使用如下：

{{ avg | battingAvg }}
{{ avg | battingAvg: '1.2-5' : 'fr-CA' }}

请参阅此 stackblitz以获取演示。

推荐阅读