我正在尝试使用 PrimeNG 学习角度。链接在这里https://primefaces.org/primeng/#/table 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: [
CurrencyPipe,
LowerCasePipe,
UpperCasePipe
]
-
通过构造函数传递管道为private
constructor(private cp: CurrencyPipe,
private lcp: LowerCasePipe,
private ucp: UpperCasePipe) {
}
-
通过管道将管道传递到 HTMLcols
:
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
and 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>
堆栈闪电战示例:https://stackblitz.com/edit/angular-4x6q9b?file=app%2Fapp.module.ts https://stackblitz.com/edit/angular-4x6q9b?file=app%2Fapp.module.ts
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)