Angular 8 Material Sort 在數據表（MatTable）中不起作用

Question

我有一個來自 Angular Material 的簡單數據表，我希望能夠使用 Material Sort 對其進行排序。

我已經嘗試了一切：在設置數據源之后在 ngOnInit 中設置排序； 直接在數據源中傳遞值，我不知道，更快的初始化？； 在 HTML 代碼中使用標簽，如 ，以及 Angular Material 文檔示例中的標簽，但它們是相同的； 我嘗試不使用 Classes 部分以避免可能的錯誤，因為它是嵌套對象等。

HTML

[...]

<mat-table [dataSource]="dataSource" matSort>

    <!-- ID Column -->
    <ng-container matColumnDef="pkMaterialid">
    <mat-header-cell *matHeaderCellDef mat-sort-header> ID </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.pkMaterialid}} </mat-cell>
    </ng-container>

    <!-- Desc Column -->
    <ng-container matColumnDef="materialdesc">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Description </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.materialdesc}} </mat-cell>
    </ng-container>

    <!-- Class Column -->
    <ng-container matColumnDef="materialClasses">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Class </mat-header-cell>
    <mat-cell *matCellDef="let element"> 
        <span *ngFor="let class of element.materialClasses; let i = index">
        <span *ngIf="i > 0">, </span>
        {{class.pkMatclassid}}
        </span> 
    </mat-cell>
    </ng-container>

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

打字稿

import { Component, OnInit, OnDestroy, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { MatAutocomplete, MatAutocompleteSelectedEvent, MatTableDataSource, MatSort } from '@angular/material';

// These interfaces are actually classes in separated scripts of my code, I created these for demostration purposes
interface Material {
  pkMaterialid: string, 
  materialdesc: string,
  materialClasses: MaterialClass[]
}

interface MaterialClass {
  pkMatclassid: string,
  matclassdesc: string,
}

@Component({
  selector: 'app-material-definitions',
  templateUrl: './material-definitions.component.html',
  styleUrls: ['./material-definitions.component.scss']
})
export class MaterialDefinitionsComponent implements OnInit, AfterViewInit {

  matList: Material[] = [];

    //Random values
  classList: MaterialClass[] = [
    { pkMatclassid: 'C1', matclassdesc: 'Class1' },
    { pkMatclassid: 'C1', matclassdesc: 'Class1' },
    { pkMatclassid: 'C1', matclassdesc: 'Class1' },
  ];

  displayedColumns: string[] = ['pkMaterialid', 'materialdesc', 'materialClasses'];
  @ViewChild(MatSort, {static: true}) sort: MatSort;
  dataSource: MatTableDataSource<Material>;

ngOnInit() {

    // Here I create some random Materials for testing
    for(let i=0; i<10; i++){
      let mat: Material = {
        pkMaterialid: 'ID' + i,
        materialdesc: 'Desc' + i,
        materialClasses: [this.classList[Math.floor(i%3)]];

      this.matList.push(mat);
    }

    this.dataSource =  new MatTableDataSource(this.matList);

  }

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

  //Other stuff
  [...]

}

更新 package.json：

"dependencies": {
    "@angular/animations": "~8.1.1",
    "@angular/cdk": "^8.0.2",
    "@angular/common": "^8.1.1",
    "@angular/compiler": "~8.1.1",
    "@angular/core": "^8.1.1",
    "@angular/forms": "~8.1.1",
    "@angular/material": "^8.0.2",
    "@angular/platform-browser": "~8.1.1",
    "@angular/platform-browser-dynamic": "~8.1.1",
    "@angular/router": "^8.1.1",
    "@ngrx/effects": "^8.0.1",
    "@ngrx/store": "^8.0.1",
    "angular-bootstrap-md": "^7.5.4",
    "bootstrap": "^4.3.1",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "ngx-image-compress": "^7.2.4",
    "rxjs": "^6.5.2",
    "ts-md5": "^1.2.4",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },

我沒有收到任何類型的錯誤消息，它只是不執行任何操作（單擊標題時我看到排序箭頭，但沒有任何反應）。 希望您能夠幫助我。 先謝謝大家了！

Answer 1

只需在您的模塊中導入MatSortModule ，

import {MatSortModule} from '@angular/material/sort';

...
declarations : [...]
imports : [MatSortModule, ...],
...

Answer 2

嘗試在與Highcharts處於同一頁面上的表上應用排序時遇到相同的問題。 我已經嘗試了SO的所有技巧，但沒有任何效果。

Answer 3

也許回答晚了，但我最近遇到了這個問題。 您可以通過將 {static: true} 替換為 null 來解決此問題：

  displayedColumns: string[] = ['pkMaterialid', 'materialdesc', 'materialClasses'];
  @ViewChild(MatSort, null) sort: MatSort;