如何在 NG-ZORRO (Ant design) 表中实现排序器和过滤器

Question

我在我的应用程序中使用ng-zorro-antd 表。我无法将过滤器和排序器实现为表格列，并且表格数据是动态的。

请在下面查看我当前的代码：

<nz-table
  #rowSelectionTable
  [nzData]="data"
  [nzPageSize]="20"
  (nzCurrentPageDataChange)="currentPageDataChange($event)"
  (nzPageIndexChange)="refreshStatus($event)"
  (nzPageSizeChange)="refreshStatus($event)"
>
  <thead>
    <tr>
      <th
        nzShowSort
        nzShowFilter
        [nzFilters]="tradeCodeList"
        (nzFilterChange)="search($event,searchAddressList)"
        *ngFor="let col of transDataCols; let i = index"
      >
        {{col}}
      </th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of rowSelectionTable.data">
      <td *ngFor="let item of transDataCols">{{data[item]}}</td>
    </tr>
  </tbody>
</nz-table>

我应该怎么做才能允许对所有列进行排序/过滤？

Answer 1

您可以通过在th 元素上设置以下属性来实现：

<th
  nzShowSort
  nzSortKey="{{col}}"
  nzShowFilter
>
</th>