Angular Mat-sort-header 5.2.4的奇怪行为

Question

我将垫子桌子与角形材料的垫子分类头结合使用。但奇怪的是，排序在6列中的2列（0和4）上工作正常。在对其他条目进行排序时，总是将一个条目拉到顶部，其余条目保持未排序或随机“排序”状态。我希望我可以提供足够的代码来解决它。导入都在那里，这基本上是从https://v5.material.angular.io/components/table/examples复制粘贴的。

桌子

每隔一列看起来像摘要中的一列

 <mat-table #matTable [dataSource]="dataSource" matSort>
  <ng-container matColumnDef="Status">
   <mat-header-cell *matHeaderCellDef mat-sort-header
....

打字稿

@ViewChild(MatSort) sort: MatSort;

ngAfterViewInit() {
   this.dataSource.sort = this.sort;
}
ngOnInit() {
   this.dataSource = new MatTableDataSource(this.projectlist); 
}
//no specific code for sorting needed (I think)

抱歉，截图是德语的，但您应该明白我的意思。

已排序

任何想法如何解决这个问题？

Answer 1

要使matSortHeader正常工作，您需要确保matColumnDef与数据源对象的属性名称匹配。例如：

<ng-container matColumnDef="status">
      <mat-header-cell *matHeaderCellDef
                       mat-sort-header>
       My header text
      </mat-header-cell>
      <mat-cell *matCellDef="let row">
        {{row.status}}
      </mat-cell>
    </ng-container>

matColumnDef为状态，因此您的行还应具有一个名称完全相同的属性：

export class MyDataSet {
 status: string;
}

否则，排序运算符将无法完成其工作。您还可以编写自己的dataAccessor：

  this.datasource.sortingDataAccessor = ((item: MyDataSet, sortHeaderId: string) => {
      // write code to get your property out of item using sortHeaderId
    });

一些进一步的信息在这里：https : //material.angular.io/components/table/api#MatTableDataSource