Angular PrimeNG表使用cols数组为每列设置管道 [英] Angular PrimeNG table set up pipe per column using cols array

问题描述

我正在尝试使用PrimeNG学习有角度的知识.这是链接 https://primefaces.org/primeng/#/table .

I am trying to learn angular with PrimeNG. Here is the link https://primefaces.org/primeng/#/table.

是否可以使用管道数组为每一列包括管道?

Is it possible to also include the pipe for each column using the pipe array?

在cols数组中，我想添加另一个这样的字段.

In the cols array, I would like to add another field like this.

this.cols = [
    { field: 'vin', header: 'Vin', type: 'date' },
    { field: 'year', header: 'Year', type: 'number' },
    { field: 'brand', header: 'Brand', type: 'number' },
    { field: 'color', header: 'Color'}
];

然后在模板中，我将像这样使用它

And then in the template, I would use it like this

<tr>
    <td *ngFor="let col of columns">
        {{ col.type? rowData[col.field] | col.type : rowData[col.field]}}
    </td>
</tr>

我已经尝试过了，这给了我模板解析错误.

I've tried this and it gives me template parsing errors.

推荐答案

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

You can try to do following:

1. 在您的ts文件中，导入所需的管道:

1. In your ts file import pipes that you need:

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

将它们添加到组件的provider属性中

Add them to providers property of your component

providers: [
  CurrencyPipe, 
  LowerCasePipe,
  UpperCasePipe
]

通过构造函数以private

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

通过cols将管道传递到HTML:

Pass pipes to your HTML via 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' }
];

我找不到将args数组传递给HTML的好方法(pipe(val, ...args)在HTML中不起作用)，所以我添加了arg1，arg2和arg3，我们可以传递和使用

I did not find a nice way to pass an array of args to HTML (pipe(val, ...args) will not work in HTML), so I added arg1, arg2 and arg3, which we can pass and use.

在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

Stackblitz example: https://stackblitz.com/edit/angular-4x6q9b?file=app%2Fapp.module.ts

这篇关于Angular PrimeNG表使用cols数组为每列设置管道的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！