MatSort 未对数据进行排序，但已填充数据

Question

数据正在显示，但排序不起作用

如果我使用示例示例，它可以工作，但不适用于我的数据...这是我的代码...

HTML：

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

  <!-- Start Column -->
  <ng-container matColumnDef="start">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Starts </th>
    <td mat-cell *matCellDef="let overtime"> 
      <span *ngIf="!this.globalOvertimeVarService.summaryState" class="status_circle" [ngClass]="{'status-green': overtime.type.approvalStatus == 'Approved'}"></span>
      {{overtime.startDate | date:'d/M/yyyy'}} ({{overtime.startDate | date:'hh:mm'}})</td>
  </ng-container>

  <!-- Date Column -->
  <ng-container matColumnDef="end">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Ends </th>
    <td mat-cell *matCellDef="let overtime"> {{overtime.endDate | date:'d/M/yyyy'}} ({{overtime.endDate | date:'hh:mm'}}) </td>
  </ng-container>

  <!-- Time Column -->
  <ng-container matColumnDef="time">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Time </th>
    <td mat-cell *matCellDef="let overtime"> {{overtime.totalTime | hoursMinutes}}</td>
  </ng-container>

  <!-- Type Column -->
  <ng-container matColumnDef="type" *ngIf="!this.globalOvertimeVarService.summaryState">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Type </th>
    <td mat-cell *matCellDef="let overtime"> {{overtime.type.name}} </td>
  </ng-container>

  <!-- Edit/View Column -->
  <ng-container matColumnDef="view">
    <th mat-header-cell *matHeaderCellDef>  </th>
    <td mat-cell *matCellDef="let overtime"> 
      <i class="material-icons edit" (click)="editOvertime(overtime);">edit</i>
      <i class="material-icons view" (click)="viewOvertime(overtime.id);">visibility</i> 
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="globalOvertimeVarService.summaryState ? queryColumns : detailColumns; sticky: true"></tr>
  <tr mat-row *matRowDef="let row; columns: (globalOvertimeVarService.summaryState ? queryColumns : detailColumns);"  [ngClass]="{'highlight': globalOvertimeVarService.selectedOvertimeId  == row.id}" [class.hidden]="!globalOvertimeVarService.summaryState ? (row.type.hideSelected || row.type.hideBasedOnDates) : (row.approvalStatus !== 'inQuery')"></tr>
</table>

组件：

    ...
    detailColumns =['start', 'end', 'time', 'type', 'view'];
    queryColumns =['start', 'end', 'time', 'view'];
    dataSource = new MatTableDataSource<UserModel>();
    @ViewChild(MatSort, { static: true }) sort: MatSort;
    ...
this.userService.getUserList()
            .subscribe(
                success => {
                  this.globalOvertimeVarService.overtimeList = success;
                  this.dataSource = new MatTableDataSource(this.globalOvertimeVarService.overtimeList);
                  this.dataSource.sort = this.sort;
                }
            );

模型如下：

id: 2
startDate: "2020-01-14"
endDate: "2020-01-14"
totalTime: 120
totalTimeTimeUnit: "minute"
dateRequested: "0001-01-01"
notes: "test"
dateApproved: null
userId: "9-XXX"
ownerId: 1
approvalStatus: "inQuery"
type: {id: 1, name: "test type 1", startTime: "15:00:00", endTime: "17:00:00", rate: 2,…}
deleted: false

Answer 1

您的matColumnDef 定义列名称必须与模型属性名称匹配。如果它们不同，则需要设置mat-sort-header 值。例如：

<!-- Start Column -->
<ng-container matColumnDef="start">
  <th mat-header-cell *matHeaderCellDef mat-sort-header="startDate"> Starts </th>

mat-sort-header="startDate" 告诉 MatTableDataSource 按行的startDate 属性排序。

---

对于嵌套对象，必须实现 SortingDataAccessor：

this.dataSource = new MatTableDataSource(yourData);
this.dataSource.sortingDataAccessor = (item, property) => {
  switch(property) {
    case 'type.name': return item.type.name;
    default: return item[property];
  }
};