如何在打字稿中使用 angular 小数点竖线

Question

// Typescript
@Component({...})
export class ConfusionMatrixComponent {

    @Input()
    roundRules = '1.0-2';
}

// HTML:
<div class="value">{{ getIntensityNumber(i) | number: roundRules }}</div>

如何在 typescript 函数上使用同一个管道？

Answer 1

您可以使用 Ng 依赖注入。

确保导入模块并将 DecimalPipe 添加到提供程序数组。

providers: [DecimalPipe,...]

然后在你的组件中。

import { DecimalPipe } from '@angular/common';

class MyService {
  constructor(private _decimalPipe: DecimalPipe) {}

  transformDecimal(num) {
    return this._decimalPipe.transform(num, '1.2-2');
  }
}

decimalPipe 的另一种方法是 formatNumber

Answer 2

我在 similar question 中找到了如何使用它：只需要从 @angular/commun 导入 DecimalPipe 并将其用作服务：

// Typescript
import { DecimalPipe } from '@angular/common';

@Component({...})
export class ConfusionMatrixComponent {

    @Input()
    roundRules = '1.0-2';

    constructor(private decimalPipe: DecimalPipe) { }

    getRoundNumber(num: number): string | null {
        return this.decimalPipe.transform(num, this.roundRules) ?? '0';
    }

}

// HTML:
<div class="value">{{ getRoundNumber(23.50873) }}</div>

此外，确保将 DecimalPipe 添加到 providers angular 模块中：

import { CommonModule, DecimalPipe } from '@angular/common';
@NgModule({
    declarations: [...],
    imports: [CommonModule],
    exports: [...],
    providers: [DecimalPipe]
})

如何在打字稿中使用 angular 小数点竖线

How to use the angular decimal pipe in typscript

html

javascript

typescript

angular-pipe

angular