Question

我正在尝试对请假表进行排序。当我的字段描述有效时，当我尝试对其他字段（例如，leave_type，leave_from，leave_to）进行排序时，它不起作用。下面是我的.html文件和.ts文件的代码

leave-form.html

<table mat-table [dataSource] = "leaveData" style="width: 100%" matSort>
          <ng-container  matColumnDef="sn"><input matInput  placeholder="Filter">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> SN. </th>
            <td mat-cell *matCellDef="let element; let i = index;"> {{i+1+(pageSize*pageIndex)}} </td>
          </ng-container>
          <ng-container  matColumnDef="leaveType">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Leave Type </th>
            <td mat-cell *matCellDef= "let element" > {{element.leave_type}} </td>
          </ng-container>

          <ng-container matColumnDef="description">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Description </th>
            <td mat-cell *matCellDef= "let element"> {{element.description}} </td>
          </ng-container>

           <ng-container matColumnDef="leaveFrom">
              <th mat-header-cell *matHeaderCellDef mat-sort-header> Leave From </th>
              <td mat-cell *matCellDef= "let element"> {{element.start_date | date: 'MM dd, y' : 'UTC'}} </td>
          </ng-container>

          <ng-container matColumnDef="leaveTo">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Leave To </th>
            <td mat-cell *matCellDef= "let element"> {{element.end_date | date: 'MM dd, y' : 'UTC'}} </td>
          </ng-container>

          <ng-container matColumnDef="appliedOn">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Applied Date </th>
            <td mat-cell *matCellDef= "let element"> {{element.created_at | date: 'MM dd, y' : 'UTC'}} </td>
          </ng-container>

          <ng-container  matColumnDef="leaveStatus">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Leave Status </th>
            <td mat-cell *matCellDef= "let element"> {{element.leave_status}} </td>
          </ng-container>

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

leave-form.ts

 getLeaveData() { 
    this.leaveApi.getUserLeave()
      .subscribe((data: []) => {
        console.log(data);
        this.leaveData = new MatTableDataSource(data);
        this.leaveData.paginator = this.paginator;
        this.leaveData.sort = this.sort;
      });
  }

Answer 1

将排序代码行放在 setTimeout(function() { this.leaveData.sort = this.sort; }, 1)

角材料表：使用描述以外的其他字段进行排序时不起作用

1 个答案: