将不同列数和不同类型的数据动态加载到 table Angular

Question

我有一些数据具有属性 id、parentId、value、decrition、dateBegin、flags(int)。所以我需要在 table 中显示这些数据。并且根据哪个父级，在 table 中必须显示不同数量的不同类型的列。同样对于不同的父子，我从属性标志中得到不同的位。现在我在组件中有 columnsDefinition 属性:

columnsDefinition = [ 
  { key: 'value', title: 'Value', type: 'string', isSortable: true, bits: 0},
  { key: 'description', title: 'Description', type: 'string', isSortable: false, bits: 0},
  { key: 'flags', title: 'Active', type: 'boolean', isSortable: false, bits: 0},
  { key: 'flags', title: 'Only user', type: 'boolean', isSortable: true, bits: 1} ]

html 组件中的 table 看起来像：

<nz-table>
...
<thead>
  <tr>
    <th *ngFor="let item of columnsDefinition">{{item.title}}</th>
  </tr>
</thead>
<tbody>
  <ng-container *ngFor="let item of resultsTable.data">
    <tr>
      ???
    </tr>
  </ng-container>
</tbody>
</nz-table>

那么，我如何迭代 tbody 中的行以根据其类型定义列。（nz-date-picker for date / nz-checkbox for boolean）

Answer 1

在模板中，您可以访问类型属性。您可以使用 *NgIf or NgSwitch.

添加条件模板

<nz-table>
...
<thead>
  <tr>
    <th *ngFor="let item of columnsDefinition">{{item.title}}</th>
  </tr>
</thead>
<tbody>
  <ng-container *ngFor="let item of resultsTable.data">
    <tr *ngIf="item.type==='string'">
      // Whatever template you want to insert
    </tr>
  </ng-container>
</tbody>
</nz-table>

Answer 2

您的 tbody 应该是：

<tbody>
    <tr *ngFor="let item of resultsTable.data">
      <ng-container *ngFor="let col of columnsDefinition">
        <td *ngIf="col.type === 'string'">
          <input nz-input [placeholder]="col.title" [(ngModel)]="item[col.key]" />
        </td>
        <td *ngIf="col.type === 'boolean'">
          <label nz-checkbox [(ngModel)]="item[col.key]"></label>
        </td>
        <td *ngIf="col.type === 'date'">
          <nz-date-picker [(ngModel)]="item[col.key]"></nz-date-picker>
        </td>
      </ng-container>
    </tr>
  </tbody>

演示在 StackBlitz。

结果:

将不同列数和不同类型的数据动态加载到 table Angular

Dynamically loading data in to table with different numbers of columns and different types in Angular

angular

typescript

ng-zorro-antd