Angular 小数竖线不显示前导零？

Question

有没有办法在 Angular 中使用内置的小数竖线而不显示前导零？

我正在尝试显示显示为 .xxx 而非 0.xxx 的棒球击球率。只有在平均值等于或大于 1.000

时才会显示整数

他可以用十进制管道来完成吗？如果没有，有人可以展示在自定义管道中执行此操作的快速方法吗？

Answer 1

在十进制管道、slice 之后使用另一个内置管道。

类似

对于

// ts
const score: number = 0.5;

// html

{{ score | number:'1.2-5' }} // output 0.50
{{ score | number:'1.2-5' | slice: 1:4 }}  // output .50
{{ score < 1 ? (score | number:'1.2-5' | slice: 1:4) : (score | number:'1.2-5') }} // output .50 and works for numbers above 1

Answer 2

这是一个自定义管道，派生自 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])/, "");
  }
}

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

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

有关演示，请参阅 this stackblitz。

Angular 小数竖线不显示前导零？

Angular decimal pipe to NOT show a leading zero?

angular-pipe

angular