angular - MatSort 显示了箭头，但实际上并没有对数据进行排序

Question

我在这个项目中使用了很多表格，而 MatSort 在所有其他组件中都运行良好。但是，我创建了这个新组件，虽然我可以在单击表格标题时显示箭头，但数据本身并没有得到排序。

我已经将项目的每一行与 Sort Header Angular 演示以及已经运行良好的组件进行了比较，但我找不到哪里出错了。下面显示的相关数据是一个对象数组。我在这里对其进行了简化，仅显示每个对象的 sequence 值。

<table mat-table [dataSource]="dataSource" matSort *ngIf="dataSource">

    <ng-container matColumnDef="sequence">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Sequence</th>
      <td mat-cell *matCellDef="let item">{{ item.sequence }}</td>
    </ng-container>

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

columnsToDisplay = [
    'sequence'
  ];

  dataSource: MatTableDataSource<SuiteItem>;
@ViewChild(MatSort) sort: MatSort;

constructor(
    private keyCodeService: KeyCodeService
  ) {
  }

  ngOnInit(): void {
    this.keyCodeService.getSequences().subscribe(
      data => {
        this.dataSource = new MatTableDataSource(data);
        this.dataSource.sort = this.sort;
      }
    );
  }

我有 matSort 指令以及 mat-sort-header，模块已导入(并且在其他组件上工作正常)，并且一个函数运行 this.dataSource.sort = this.sort 方法，因此当我单击标题时，它们应该在升序排序和降序排序之间切换。相反，尽管出现了箭头，但数据没有任何变化。

Answer 1

<table mat-table [dataSource]="dataSource" matSort [hidden]="dataSource.data.length != 0">

    <ng-container matColumnDef="sequence">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Sequence</th>
      <td mat-cell *matCellDef="let item">{{ item.sequence }}</td>
    </ng-container>

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

您不能将 *ngIf 用于排序。不起作用。尝试将此代码与 [hidden] 一起使用。