TypeScript/Angular - 排序 table 适用于除第一列以外的所有列

Question

我已按照提供的 official documentation and used the example 进行操作，但无法按降序顺序对第一列进行排序。当用另一列排序，再点击第一列时，只会按升序排序。之后，无论第一列的排序被点击多少次，table都会进行更新。

我在这里添加了项目：https://stackblitz.com/edit/angular-ivy-6xblrn。请注意，它看起来并不美观，但如果运行在本地计算机上（我很难让 StackBlitz 工作），up/down 箭头将显示。

Answer 1

您只需将该列命名为数据数组中对象的字段名称即可。

名称必须匹配的原因是，如果您注意到，所有这些排序都是由 Angular material 自动完成的（认为是一种“语法糖”）。我的意思是，排序方法不是我们在任何地方编写的，它仅由 Angular Material.

完成

所以 mat-sort-header 必须实现这种自动排序的方法是将其列的名称（按您要排序的名称）与排序时用作参考的字段名称。

我让你自己的 stackblitz 工作正常： https://stackblitz.com/edit/angular-ivy-njblvd?file=src/app/app.component.html

P.S：突出显示我的更改：

TS:

  displayedColumns: string[] = [
    'id',
    'firstName',
    'lastName',
    'age',
    'gender',
  ];

HTML:

    <ng-container cdkFocusInitial matColumnDef="id">
      <th
        mat-header-cell
        *matHeaderCellDef
        mat-sort-header
        sortActionDescription="Sort by rank"
      >
        No.
      </th>
      <td mat-cell *matCellDef="let element">{{ element.id }}</td>
    </ng-container>

TypeScript/Angular - 排序 table 适用于除第一列以外的所有列

TypeScript/Angular - Sorting table works on all columns except the first

html-table

typescript

angular-material

angular