在 Angular 中的 *ngFor 中动态应用格式 filter/pipe (Angular 2/4)？

Question

这是我在组件中的数据对象

testData=[
  {
    "value": "test value with null formatter",
    "formatter": null,
  },
  {
    "value": "1234.5678",
    "formatter": "number:'3.5-5'",
  },
  {
    "value": "1.3495",
    "formatter": "currency:'USD':true:'4.2-2'",
  }
]

HTML

<div *ngFor="let data of testData">{{data.value | data.formatter}}</div>

我需要显示 table 数据，每行的格式不同。

我正在使用 typescript/angular4。

Answer 1

一种选择是创建自定义管道。然后，您可以将格式字符串传递到自定义管道中。您的自定义管道将解析传入的格式化字符串并执行适当的格式化。

这听起来行得通吗？

Answer 2

您需要创建管道。

示例（用 N 替换？）：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'nnn'})
export class NReplacePipe implements PipeTransform {
  transform(value: string): string {
   // write your custom logic here
    let newValue = value.replace(/\?/g, 'N');
    return `${newValue}`;
  }
}

然后在您的 html 代码中使用它

<p>varName |  nnn </p>

这会改变你的输出。

在 Angular 中的 *ngFor 中动态应用格式 filter/pipe (Angular 2/4)？

Apply formatting filter/pipe dynamically in *ngFor in Angular (Angular 2/4)?

typescript

angular-pipe

angular