如何使用 Angular Material 表 MatSort

Question

我有一个mat-table 我想添加排序功能。有人可以告诉我为什么以下不起作用？我在列标题上看到了带样式的箭头，但它们没有按预期对数据进行排序。

<table mat-table matSort [dataSource]="employeeDisplayList" class="mat-elevation-z8 table">

<!-- Employee Name Column -->
<ng-container matColumnDef="employeeName">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Employee Name </th>
  <td mat-cell *matCellDef="let element" 
    [ngClass]="{'dependent': element.relationship !== 'Primary'}"> {{element.employeeName}} </td>
</ng-container>

<!-- Relationship Column -->
<ng-container matColumnDef="relationship">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Relationship </th>
  <td mat-cell *matCellDef="let element"
    [ngClass]="{'dependent': element.relationship !== 'Primary'}"> {{element.relationship}} </td>
</ng-container>

</table>

TS：

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

@NgModule({
  declarations: [EnrollmentComponent, PrepareSubmissionComponent, PlansComponent, EmployeesComponent],
  imports: [
    ...
    MatTableModule,
    MatSortModule
  ]
})

Answer 1

您必须在组件中定义 displayColumns。 您还必须使用 MatTableDataSource 并将数据放入其中并进行排序。

尝试在您的 ts 文件中添加以下代码

displayedColumns: string[] = ['employeeName', 'relationship'];
dataSource;

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

ngOnInit() {
  this.dataSource = new MatTableDataSource(employeeDisplayList);
  this.dataSource.sort = this.sort;
}

您还错过了 html 中的 2 行以下内容。

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

您的最终 html 如下所示

<table mat-table matSort [dataSource]="dataSource" class="mat-elevation-z8 table">

  <!-- Employee Name Column -->
  <ng-container matColumnDef="employeeName">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Employee Name </th>
    <td mat-cell *matCellDef="let element" [ngClass]="{'dependent': element.relationship !== 'Primary'}"> {{element.employeeName}} </td>
  </ng-container>

  <!-- Relationship Column -->
  <ng-container matColumnDef="relationship">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Relationship </th>
    <td mat-cell *matCellDef="let element" [ngClass]="{'dependent': element.relationship !== 'Primary'}"> {{element.relationship}} </td>
  </ng-container>

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