Angular Material - 排序mat-table的數據

Question

我正在使用 Angular 材料。 如何對數據進行排序？

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 錯誤類型錯誤：無法設置未定義的屬性“排序”。

Answer 1

你可以避免這個錯誤

core.js:6210 錯誤類型錯誤：無法設置未定義的屬性“排序”。

通過檢查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'];

StackBlitz 上的示例解決方案

---

參考

Angular 料表整理