Таблица Angular PrimeNG настраивает канал для каждого столбца с использованием массива cols

Я пытаюсь изучить angular с помощью 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>

Я пробовал это, и это дает мне ошибки синтаксического анализа шаблона.


angular primeng-turbotable
person Dekso    schedule 20.06.2018    source источник

Ответы (1)


arrow_upward
8
arrow_downward

Вы можете попробовать сделать следующее:

  1. В вашем ts файле импортируются каналы, которые вам нужны:

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

  2. Добавьте их в свойство Provider вашего компонента

    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

person Andriy    schedule 20.06.2018