angular-material-7 - 为什么 mat-sort 在我的 mat-table 上不起作用

Question

我在一页上使用多个垫表。我需要一张桌子的垫子排序。

当我调试代码响应时得到结果但 matSort 不起作用

 <table #transactions class="transactions-table" mat-table [dataSource]="trassactionDataSource" matSort>
     <ng-container matColumnDef="id">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Transaction ID </th>
         <td mat-cell *matCellDef="let row"> {{row.transaction_id}} </td>
     </ng-container>

     <ng-container matColumnDef="product_name">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Product </th>
         <td mat-cell *matCellDef="let row"> {{row.listing_title}} </td>
     </ng-container>

.....

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

'

displayedColumns: string[] = ['id', 'product_name', ...];

@ViewChild(MatSort)private sort: MatSort;

 ngOnInit() {
       this.userService.getDashboardData().subscribe((response) => {
      if (response.code == 401) {
        this.authService.logout(true);
      } else {

           this.trassactionDataSource = new MatTableDataSource(response.result.transactions);

           var that = this;
           setTimeout(function () {
               that.trassactionDataSource.sort = that.sort;
           }, 500);
      }
}[enter image description here][1]

我没有收到任何控制台错误。

标签： angular-material-7

Answer 1

感谢您阅读本文。我想通了。matColumnDef = response result

前任：

 <ng-container matColumnDef="id">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Transaction ID </th>
         <td mat-cell *matCellDef="let row"> {{row.transaction_id}} </td>
     </ng-container>

更改为

 <ng-container matColumnDef="transaction_id">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Transaction ID </th>
         <td mat-cell *matCellDef="let row"> {{row.transaction_id}} </td>
     </ng-container>