Question

我正在尝试在Angular 7中对表格MatSort进行排序，并且是angular的新手。数据在dataSource中，并且显示正确。我的数据来自我叫后端的服务，然后设置this.dataSource.sort = this.sort，如以下示例所示：

https://stackblitz.com/angular/qlbmkgjnvya?file=main.ts（来自角度文档！）

我尝试按照有角度的文档中的示例进行操作，但是由于排序对我的示例没有任何作用，所以我感觉好像缺少了一些东西，但是当我以他们的示例并在本地使用它时，效果很好。

//组件

    import {MatSort} from '@angular/material/sort';
    ...
    dataSource: MatTableDataSource<any[]>;
    @ViewChild(MatSort) sort: MatSort;
    ...
    ngOnInit() {
    this.api.getData().subscribe(data => {
      this.data= data; // this is an array of the data
      this.dataSource = new MatTableDataSource(this.data); // works enough to display on the page without errors
      this.dataSource.sort = this.sort; // has to be in here to ensure no race condition between the api call and setting the sort property
   });

// view（component.html）

<table mat-table #table [dataSource]="dataSource" matSort>

  <!-- Title Column -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> data ID </th>
    <td mat-cell *matCellDef="let element" class="id-col"> {{element.dataID}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

未显示任何错误消息，但表未更新。

Answer 1

如果您的数据名称与列名称不匹配，则sort函数不知道要对哪些数据进行排序，因此最终不执行任何操作（？）并且不会引发错误。不知道为什么我没早考虑这个。

Answer 2

我遇到了相同的问题，并在按如下所示更改列以尊重显示列时解决了该问题：

 displayedColumns: string[] = ['dataID'];

<table mat-table #table [dataSource]="dataSource" matSort>

  <!-- Title Column -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> data ID </th>
    <td mat-cell *matCellDef="let element" class="id-col"> {{element.dataID}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

Angular 7：使用服务中的数据作为MatTableDataSource对Mat-Table进行排序

2 个答案: