Angular 5材料数据表在排序时不会更新

我已经阅读了我不知道有多少个例子,据我所知,我正确地遵循了这个例子,但是当我点击 Headers 时列不会更新 .

  • 我在我的app.module.ts中包含了MatSortModule

  • 我已经在mat-table上加入了matSort

  • 我已经在我希望能够排序的列的 Headers 单元格中包含了mat-sort-header(所有这些)

  • 我已经包含@ViewChild(MatSort)排序:MatSort;和相应的

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

我不知道还剩下什么 . 这是我的代码片段,任何帮助将不胜感激 .

<mat-table #table [dataSource]="dataSource" matSort class="dataTable">

    <!-- Name Column -->
    <ng-container matColumnDef="name">
        <mat-header-cell 
            *matHeaderCellDef 
            fxLayout="row" 
            fxLayoutAlign="start center" 
            mat-sort-header
            class="clickable"
        > 
            Product Name 
        </mat-header-cell>

        <mat-cell 
            *matCellDef="let item" 
            class="table-cell-content"
        > 
            {{item.name}} 
        </mat-cell>
    </ng-container>

...

defaultData: Array<Object> = null;
dataSource = new MatTableDataSource(this.defaultData);

@ViewChild(MatSort) sort: MatSort;

constructor(private getDataService: GetDataService) { 
  this.getDataService.getData()
    .subscribe(data => {
      this.defaultData = data;
      this.dataSource.data = this.defaultData;
    },
    err => console.log(err));
}

...

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

回答(1)

2 years ago

我唯一能想到的可能是你的问题是你可能不应该直接将数据分配给 .dataSource 属性的 .data 属性 . 有可能直接修改这个属性导致排序不能理解它应该首先处理哪些数据,但我不能肯定地说(这里只是在黑暗中拍摄) . 创建 new MatTableDataSource() 引用应该触发内置在CDK表结构中的Observable序列的反应性,这应该允许进行排序 .

constructor(private getDataService: GetDataService) { 
  this.getDataService.getData()
    .subscribe(data => {
      // Your code:
      // this.defaultData = data;
      // this.dataSource.data = this.defaultData;
      
      // What I would do:
      this.defaultData = data;
      this.dataSource = new MatTableDataSource(data);
    },
    err => console.log(err));
}