Angular Ant design (NG ZORRO) 表添加排序不起作用

Question

我正在为 Ant NG ZORRO table 使用我的 Angular 项目，我正在添加排序选项，但它有一些冲突，即排序选项无法正常工作。 任何人都知道如何正确地做到这一点

谢谢

here the stack blitz

我的代码在这里

 <nz-table
              #basicTable
              #sortTable
              [nzData]="listOfDisplayData"
              #borderedTable
              nzBordered
              #headerTable
              [nzLoading]="loading"
              [nzPageSize]="5" [nzScroll]="{ x: '1000px', y: '240px' }">
              <thead>
              <tr>
                <th nzCustomFilter nzColumnKey="cName" [nzSortFn]="true"
                >
                  Company Name
                  <nz-filter-trigger [(nzVisible)]="visible" [nzActive]="searchValue.length > 0"
                                     [nzDropdownMenu]="menu">
                    <i nz-icon nzType="search"></i>
                  </nz-filter-trigger>
                </th>
                <th>Position Title</th>
                <th>Position Location</th>
                <th>Consultant Name</th>
                <th nzWidth="100px">Status</th>
              </tr>
              </thead>
              <tbody>
              <tr *ngFor="let data of basicTable.data">
                <td>{{ data.cName }}</td>
                <td>{{ data.cTitle }}</td>
                <td>{{ data.pLocation }}</td>
                <td>{{ data.conName }}</td>
                <td>
                  <a><nz-tag [nzColor]="'blue'">Booked</nz-tag></a>
                </td>
              </tr>
              </tbody>
            </nz-table>
            <nz-dropdown-menu #menu="nzDropdownMenu">
              <div class="ant-table-filter-dropdown">
                <div class="search-box">
                  <input type="text" nz-input placeholder="Search name" [(ngModel)]="searchValue" />
                  <button nz-button nzSize="small" nzType="primary" (click)="search()" class="search-button">
                    Search
                  </button>
                  <button nz-button nzSize="small" (click)="reset()">Reset</button>
                </div>
              </div>
            </nz-dropdown-menu>

.ts

export class NzDemoTableMultipleSorterComponent {
   constructor(private i18n: NzI18nService) {}



  loading = false;
  searchValue = '';
  visible = false;
  // Project Booked




  listOfData: ProjectBooked[] = [
    {
      key: '1',
      cName: 'OBUSIT ',
      cTitle: 'Chief Administrative Officer',
      pLocation: 'Washington, DC',
      conName: 'Admin',
  
},
    {
      key: '2',
      cName: 'OBUSIT TEST ',
      cTitle: 'Chief Administrative Officer',
      pLocation: 'Washington, DC',
           conName: 'Admin',
    },
    {
      key: '3',
      cName: 'OBUSIT University',
      cTitle: 'Chief Administrative Officer',
      pLocation: 'Washington, DC',
      conName: 'Admin',
    },
    {
      key: '4',
      cName: 'OBUSIT Howard University',
      cTitle: 'Chief Administrative Officer',
      pLocation: 'Washington, DC',
      conName: 'Admin',
      
    },

  ];
  listOfDisplayData = [...this.listOfData];








  // Month Picker
  date = null;
  dateRange = [];
  isEnglish = false;




  reset(): void {
    this.searchValue = '';
    this.search();
  }

  search(): void {
    this.visible = false;
    this.listOfDisplayData = this.listOfData.filter((item: ProjectBooked) => item.cName.indexOf(this.searchValue) !== -1);
  }





  onChange(result: Date): void {
    console.log('onChange: ', result);
  }

  getWeek(result: Date): void {
    console.log('week: ', getISOWeek(result));
  }

  changeLanguage(): void {
    this.i18n.setLocale(this.isEnglish ? zh_CN : en_US);
    this.isEnglish = !this.isEnglish;
  }


  ngOnInit(): void {


  }

}

Answer 1

根据table docs [nzSortFn]="true" 仅适用于服务器端排序。

[nzSortFn]：排序函数，用于对浏览器中的数据进行排序 side(ref to Array.sort compareFunction)，使用服务器时设置为true 排序

事实上，您需要为每一列[nzSortFn]="sortFn" 实现自己的排序功能。例如：

 ....
 <tr>
    <th nzCustomFilter nzColumnKey="cName" [nzSortFn]="sortFn">
    ...

使用您自定义的排序：

  sortFn = (a: ProjectBooked, b: ProjectBooked) => a.cName.localeCompare(b.cName);

这是一个有效的Stackblitz。

一般来说，我建议您使用listOfColumns 来设置您的表格，就像在example 中所做的那样。如果您想实现更多功能（如过滤），它提供了更简洁的配置，并且是一种更简洁的方式。