angular - 如何在 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>