Angular PrimeNG表使用cols数组为每列设置管道

Question

我正在尝试用PrimeNG学习角度.这是链接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>

我试过这个,它给了我模板解析错误.

Answer 1

您可以尝试执行以下操作:

1. 在你需要的ts文件导入管道中:

   import { 
     CurrencyPipe,
     LowerCasePipe,
     UpperCasePipe
   } from '@angular/common';
   

2. 将它们添加到组件的providers属性中

   providers: [
     CurrencyPipe, 
     LowerCasePipe,
     UpperCasePipe
   ]
   

3. 通过构造函数传递管道 private

   constructor(private cp: CurrencyPipe, 
               private lcp: LowerCasePipe,
               private ucp: UpperCasePipe) {
   }
   

4. 通过以下方式将管道传递给HTML cols:

   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,我们可以通过和使用.

5. 在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