我正在尝试使用 PrimeNG 学习 Angular。这是链接https://primefaces.org/primeng/#/table 。
是否还可以使用管道数组包含每列的管道?
在 cols 数组中,我想添加另一个这样的字段。
this.cols = [
{ field: 'vin', header: 'Vin', type: 'date' },
{ field: 'year', header: 'Year', type: 'number' },
{ field: 'brand', header: 'Brand', type: 'number' },
{ field: 'color', header: 'Color'}
];
然后在模板中,我会这样使用它
<tr>
<td *ngFor="let col of columns">
{{ col.type? rowData[col.field] | col.type : rowData[col.field]}}
</td>
</tr>
我已经尝试过这个,但它给了我模板解析错误。
最佳答案
您可以尝试执行以下操作:
在您的 ts 文件中导入您需要的管道:
import { CurrencyPipe, LowerCasePipe, UpperCasePipe } from '@angular/common';
将它们添加到组件的providers属性中
providers: [ CurrencyPipe, LowerCasePipe, UpperCasePipe ]
通过构造函数将管道传递为
private
constructor(private cp: CurrencyPipe, private lcp: LowerCasePipe, private ucp: UpperCasePipe) { }
通过
cols
将管道传递到 HTML:this.cols = [ { field: 'vin', header: 'Vin', type: this.ucp }, { field: 'startYear', header: 'Year', type: this.cp, arg1: 'CAD'}, { field: 'brand', header: 'Brand', type: this.lcp }, { field: 'color', header: 'Color' } ];
我没有找到将参数数组传递给 HTML 的好方法(
pipe(val, ...args)
在 HTML 中不起作用),因此我添加了arg1
、arg2
和arg3
,我们可以传递和使用它们。在 HTML 中使用它:
<td *ngFor="let col of columns"> {{ col.type ? col.type.transform(rowData[col.field], col.arg1, col.arg2, col.arg3) : rowData[col.field] }} </td>
Stackblitz 示例:https://stackblitz.com/edit/angular-4x6q9b?file=app%2Fapp.module.ts
关于Angular PrimeNG 表使用 cols 数组每列设置管道,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50944629/