Angualr+Ng-Zorro(8.X)表格控件前端排序

前言：一定要注意ng-zorro的版本

import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-table-head',
  template: `
    <nz-table #filterTable [nzData]="listOfData">
      <thead (nzSortChange)="sort($event)" nzSingleSort>
        <tr>
          <th
            nzShowSort
            nzSortKey="name"
           
          >
            Name
          </th>
          <th nzShowSort nzSortKey="age">Age</th>
          <th
            nzShowSort
            nzSortKey="address"
          
          >
            Address
          </th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of filterTable.data">
          <td>{{ data.name }}</td>
          <td>{{ data.age }}</td>
          <td>{{ data.address }}</td>
        </tr>
      </tbody>
    </nz-table>
  `,
})
export class NzDemoTableHeadComponent {
  sortName: string | null = null;
  sortValue: string | null = null;
  searchAddress: string;

  listOfSearchName: string[] = [];
  listOfData: Array<{
    name: string;
    age: number;
    address: string;
    [key: string]: string | number;
  }> = [
    {
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
    },
    {
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
    },
    {
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
    },
    {
      name: 'Jim Red',
      age: 32,
      address: 'London No. 2 Lake Park',
    },
  ];

  sort(sort: { key: string; value: string }): void {
    this.sortName = sort.key;
    this.sortValue = sort.value;
    this.search();
  }

  search(): void {
    const data = JSON.parse(JSON.stringify(this.listOfData));
    if (this.sortName && this.sortValue) {
      this.listOfData = [];
      this.listOfData = data.sort((a, b) =>
        this.sortValue === 'ascend'
          ? a[this.sortName!] > b[this.sortName!]
            ? 1
            : -1
          : b[this.sortName!] > a[this.sortName!]
          ? 1
          : -1
      );
    } else {
      this.listOfData = data;
    }
  }
}