ng-zorro antd, nz-table 动态表列和行答案

【问题标题】：ng-zorro antd, nz-table dynamic table columns and rowsng-zorro antd, nz-table 动态表列和行
【发布时间】：2022-01-01 11:27:40
【问题描述】：

我有一个表格，其中列和行单元格是动态设置的，在表头 th 中的内容应该是动态的，对于 table body tr 也可能包含包含另一个组件标记的 HTML。

有什么方法可以解决这个问题吗，我创建了一个名为 table 的组件，并且该表具有 @Input 和 @Output 可重复用于不同的用途。

在 ng-zorro 文档中，无法使用表数据源技术，因此我可以使用 react 和等渲染函数。

【问题讨论】：

标签： javascript angular antd ng-zorro-antd

【解决方案1】：

您可以创建两个输入，一个用于列，一个用于行。

要动态生成列，您必须向列输入发送一个包含列对象的数组。在那里你可以设置你想要的一切。我通常使用这样的标题和列功能：

listOfColumn = [
    {
      title: 'Code',
      compare: (a: User, b: User) => a.code.localeCompare(b.code)
    },
    {
      title: 'Customer',
      compare: (a: User, b: User) => a.name.localeCompare(b.name)
    }
]

使用它的html代码如下：

<thead>
    <tr>
      <th *ngFor="let column of listOfColumn" [nzSortFn]="column.compare">{{ column.title }}</th>
    </tr>
</thead>

对于数据，只需将其发送到其他输入并将数组设置为表格的数据输入并循环显示内容：

<nz-table
  #basicTable
  [nzData]="data">
  <thead>
    <tr>
      <th *ngFor="let column of listOfColumn" [nzSortFn]="column.compare">{{ column.title }}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let user of basicTable.data">
      <td>{{ user.code }}</td>
      <td>{{ user.name }}</td>
  </tbody>
</nz-table>

希望我能回答你的问题：D

【讨论】：