Question

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

我正在尝试显示棒球击球平均值，以及显示为.xxx NOT 0.xxx的平均值。唯一一次显示整数是平均值等于或大于1.000

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

Answer 1

这是一个自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' }}

有关演示，请参见this stackblitz。

Answer 2

在十进制管道，切片之后使用另一个内置管道。

类似

对于

// 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

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

2 个答案: