Angular Material - 对 mat-table 的数据进行排序

Question

我正在使用 Angular Material。如何对数据进行排序？

HTML 文件

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


    <ng-container matColumnDef="position">
        <mat-header-cell *matHeaderCellDef mat-sort-header> No. </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.assetId}} </mat-cell>
    </ng-container>


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


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


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

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

.ts 文件

import { Component, OnInit, ViewChild } from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {MatTableDataSource} from '@angular/material/table';
import {MatSort} from '@angular/material/sort';
import { AddAssetService } from '../shared/add-asset.service';
export interface Element {
  assetId: any;
  assetName: any;
  cpuName: any;
  hddName:  any;
}

@Component({
  selector: 'app-material-two',
  templateUrl: './material-two.component.html',
  styleUrls: ['./material-two.component.css']
})
export class MaterialTwoComponent implements OnInit {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource:any;
  @ViewChild(MatSort, { static: false }) sort!: MatSort;
  constructor(private service:AddAssetService) { }

  ngOnInit(): void {

   this.assetGrid();
   this.ngAfterViewInit()
    console.log(this.dataSource);
  }
  assetGrid() {
    this.service.GetAssets().subscribe(user=>{
      this.dataSource = new MatTableDataSource<Element>(user);
       console.log("this.listData",this.dataSource);
       console.log("this.user",user)
    });
  }
    ngAfterViewInit() {
      this.dataSource.sort = this.sort;
  }

}

出现错误：

core.js:6210 ERROR TypeError: Cannot set property 'sort' of undefined.

Answer 1

你可以避免这个错误

core.js:6210 ERROR TypeError: Cannot set property 'sort' of undefined.

通过检查 this.dataSource 不能是 undefined 也不能是 null，然后分配如下：

.component.ts

if (this.dataSource) {
  this.dataSource.sort = this.sort;
}

---

担忧

问题 1：缺少工具 AfterViewInit

您必须在您的组件上实施 AfterViewInit。否则，ngAfterViewInit将不会被执行。并从 ngOnInit 方法中删除调用 this.ngAfterViewInit 方法。

.component.ts

import { AfterViewInit } from '@angular/core';

export class MaterialTwoComponent implements OnInit, AfterViewInit {
  ngOnInit(): void {
    this.assetGrid();
    console.log(this.dataSource);
  }

  ...
}

问题 2：matColumnDef 必须与 属性 名称完全一致

matColumnDef 必须与数据的 属性 名称相同。否则，排序将不起作用。因此，您还需要更新属性 displayedColumns。

.component.html

<ng-container matColumnDef="assetId">
  ...
</ng-container>

<ng-container matColumnDef="assetName">
  ...
</ng-container>

<ng-container matColumnDef="cpuName">
  ...
</ng-container>

<ng-container matColumnDef="hddName">
  ...
</ng-container>

.component.ts

displayedColumns: string[] = ['assetId', 'assetName', 'cpuName', 'hddName'];

Sample Solution on StackBlitz

---

参考资料

Angular Material Table Sorting