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

也许回答晚了，但我最近遇到了这个问题。您可以通过将 {static: true} 替换为 null 来解决此问题：

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