angular + ng-zorro 表格后台分页及排序功能实现，angular + ng-zorro 表格排序不起作用解决办法

angular + ng-zorro 表格排序不起作用是因为数据是从后端获取的，也是后端分页，所以要自己写排序啦~~~~

举例：HTML

<nz-table #basicTable nzBordered [nzData]="listOfData" [nzTotal]="bottomTable.total"
    [nzPageSize]="bottomTable.pageSize" [nzFrontPagination]="false" [nzPageIndex]="bottomTable.pageNo"
    [nzScroll]="{ x: '1340px', y: '230px' }" class="bottom_table" (nzPageIndexChange)="myChange($event)">
    <thead>
      <tr>
        <th nzWidth="180px">A</th>
        <th nzWidth="100px">B</th>
        <th nzWidth="100px">C</th>
        <th nzWidth="100px">D</th>
        <th nzWidth="100px">E</th>
        <th nzWidth="100px">F</th>
        <th nzWidth="250px"
        [nzSortFn]="true"
        (nzSortOrderChange)="sortChange($event)"
        >G</th>
        <th nzWidth="100px">H</th>
        <th nzWidth="100px">I</th>
        <th nzWidth="110px">J</th>
        <th nzWidth="100px"
        [nzSortFn]="true"
        (nzSortOrderChange)="sortChange1($event)"
        >K</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of basicTable.data" (click)="openAnalysis(data)" class="my_small_tr">
        <td>{{ data.a }}</td>
        <td>{{ data.b }}</td>
        <td>{{ data.c }}</td>
        <td>{{ data.d }}</td>
        <td>{{ data.e }}</td>
        <td>{{ data.f }}</td>
        <td>{{ data.g }}</td>
        <td>{{ data.h }}</td>
        <td>{{ data.i }}</td>
        <td>{{ data.j }}</td>
        <td>{{ data.k }}</td>
      </tr>
    </tbody>
  </nz-table>

TS文件

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { _HttpClient, ModalHelper } from '@delon/theme';
import { I18NService } from '@core';
import { NzMessageService } from 'ng-zorro-antd/message';
import { myCommonService } from 'src/app/core/net/hr_report/myCommon.service';
import { CommonFunService } from 'src/app/core/net/common_zz/common-fun.service';
import { TossAnalysisComponent } from '../../analysis/analysis.component';
import { NzTableFilterFn, NzTableFilterList, NzTableSortFn, NzTableSortOrder } from 'ng-zorro-antd/table';
const BaseUrl = {
  // path: 'http://10.111.111.111:3000'

}

@Component({
  selector: 'app-report',
  templateUrl: './report.component.html',
  styleUrls: ['./report.component.less']
})
export class ReportComponent implements OnInit {

  @Input()
  public listOfData: any = []
  @Input()
  public form: any = {}
  @Output()
  private outer: EventEmitter<any> = new EventEmitter();
  @Input()
  public record: string = ''
  @Input()
  public bottomTable: any = {}

  constructor(
    public msg: NzMessageService,
    public mlbCom: myCommonService,
    public I18NService: I18NService,
    public http: _HttpClient,
    public commonFun: CommonFunService,
    private modal: ModalHelper,
  ) { }
  ngOnInit(): void {
  }
  sortChange(e) {
    console.log(e)
    this.listOfData = e === 'ascend' ? this.listOfData.sort(
      (a, b) => a.stationId.localeCompare(b.stationId)
    ) : this.listOfData.sort(
      (a, b) => b.stationId.localeCompare(a.stationId)
    )
  }
  sortChange1(e) {
    console.log(e)
    this.listOfData = e === 'ascend' ? this.listOfData.sort(
      (a, b) => a.tossRate - b.tossRate
    ) : this.listOfData.sort(
      (a, b) => b.tossRate - a.tossRate
    )
  }
  myChange(e) {
    // this.bottomTable.pageNo = e
    this.outer.emit(e)
  }
}