Angular * ng Для директивы отображать данные в представлении - PullRequest
Новая
       52

Angular * ng Для директивы отображать данные в представлении

2 голосов
/ 27 мая 2020

Работа с angular primeng API и следование документации 

API [
      id: 1, name:"Test 1", currency: "Euro", status: "Active", date: "4th of April 2008" },
      id: 2, name:"Test 2", currency: "Dollar", status: "Active", date: "12nd of May 2005" }
   ]

 ngOnInit {
   this.col = [
     {field: 'name', header: 'Name'},
     {field: 'currency',  header: 'Currency'},
     {field: 'status', header: 'Status'},
     {field: 'date', header: 'Date'}
   ]
}

Я могу успешно визуализировать данные, используя * ngFor 

Template.html
<tr>
  <td *ngFor="let col of column">
      {{rowData[col.field]}}
  </td>
<tr>

Теперь мне нужно внести изменения в каждый из данных значение, например:

* имя использовать верхний регистр
* валюта использовать валюту конвейер
* дата использовать дату конвейер 

<td *ngFor="let col of columne">
   <ng-container *ngIf="col.field === 'date'"> {{rowData[col.field] | date: 'dd/MMM/yyyy'}}</ng-container>
   <ng-container *ngIf="col.field === 'currency'"> {{rowData[col.field] | currency:'CAD':'code'}}</ng-container>
   <ng-container *ngIf="col.field === 'name'"> {{rowData[col.field] | uppercase}}</ng-container>
</td>

Как я могу изменить данные, отображаемые и для каждого значение измените соответственно

Ответы [ 3 ]

2 голосов
/ 27 мая 2020

вы можете незначительно улучшить, используя вместо этого ngSwitch: 

  <ng-container *ngFor="let col of columne">
    <td [ngSwitch]="col.field">
       <ng-container *ngSwitchCase="'date'"> {{rowData[col.field] | date: 'dd/MMM/yyyy'}}</ng-container>
       <ng-container *ngSwitchCase="'currency'"> {{rowData[col.field] | currency:'CAD':'code'}}</ng-container>
       <ng-container *ngSwitchCase="'name'"> {{rowData[col.field] | uppercase}}</ng-container>
       <ng-container *ngSwitchDefault>{{rowData[col.field]}}</ng-container
    </td>
  </ng-container>

, но я бы рекомендовал использовать некоторую библиотеку компонентов, которая предлагает таблицу, если вам нужна таблица с столбцами Dynami c, например этот. Поскольку другие ваши варианты, по существу, будут включать в себя создание вашего собственного многоразового компонента таблицы, что может быть излишним.

0 голосов
/ 27 мая 2020

Вот пример, который я создал с использованием CDK-таблиц:

https://stackblitz.com/edit/angular-ivy-bes8zf

Он использует динамический c подход.

0 голосов
/ 27 мая 2020

Я придерживаюсь того же мнения, что и @ bryan60. Таблица материалов может спасти вас от таких кошмаров 

const dataSource = [
  {id: 1, name:"Test 1", currency: "Euro", status: "Active", date: "4th of April 2008" },
  {id: 2, name:"Test 2", currency: "Dollar", status: "Active", date: "12nd of May 2005" }
];
displayedColumns: string[] = ['id', 'name', 'currency', 'status', 'date'];

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> Id </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <ng-container matColumnDef="currency">
    <th mat-header-cell *matHeaderCellDef> Currency </th>
    <td mat-cell *matCellDef="let element"> {{1 | currency: element.currency}} </td>
  </ng-container>

  <ng-container matColumnDef="status">
    <th mat-header-cell *matHeaderCellDef> Status </th>
    <td mat-cell *matCellDef="let element"> {{element.status}} </td>
  </ng-container>

  <ng-container matColumnDef="date">
    <th mat-header-cell *matHeaderCellDef> Date</th>
    <td mat-cell *matCellDef="let element"> {{element.date | date: 'dd/MM/yyyy' }} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
...