排序有效，但 table 中的数据未排序 - Angular Material Table

Question

由于某些原因，表面垫子的排序有箭头移动，因此排序应该可以，但是没有排序...

这是 HTML :

<div class="mat-elevation-z8">
  <table mat-table [dataSource]="dataSource" matSort>
      <!-- name -->
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ model.fields.name.label }}</th>
        <td mat-cell *matCellDef="let element"> {{ element.name }} </td>
      </ng-container>

   <!-- ... -->
  </table>
</div>

在我的 component.ts:

import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';

export class DevizaListComponent implements OnInit {
  dataSource = new MatTableDataSource<DevizaInterface>(devizas);
  devizas: DevizaInterface[] = [
    {
      name: 'dollar',
      code: 'USD' ,
    },
    //...
    //...
  ];
  //...

  @ViewChild(MatSort, { static: true }) sort: MatSort;


  //...

  constructor() { }

  ngOnInit() {
    this.dataSource.sort = this.sort;
  }
}

我在 app.module.ts 中导入了这个：

import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';

@NgModule({
  imports: [
    MatTableModule,
    MatSortModule,
  ],
})

控制台不显示错误消息。排序的界面出现箭头，但table没有按应有的顺序排序是什么原因？

Answer 1

很有可能，当您将 this.sort 分配给 ngOnInit 中的 this.dataSource.sort 时，它尚未定义。因此，dataSource 不接收排序事件。这可能是由于结构指令（即 *ngIf）仅有条件地在模板中包含 table。

可以通过更改@ViewChild 上的static 值并在ngAfterViewInit livecycle hook instead. Please consult the Angular documentation about the component's livecycle 中分配sort 来解决问题。

export class DevizaListComponent implements AfterViewInit {
  ...

  @ViewChild(MatSort, { static: false}) sort: MatSort;

  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
  }

You should also change the order of your class members and create dataSource after devizas has been initialized.

排序有效，但 table 中的数据未排序 - Angular Material Table

Sorting works, but the data in the table is not sorted - Angular Material Table

angular

typescript

angular-material

angular-material-table