首页 文章

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

提问于
浏览
0

我正在使用mat-table和角度材料的mat-sort-header . 但奇怪的是,排序在6列中的2列(0和4)上正常工作 . 排序其他条目时,一个条目总是被拉到顶部,其余条目保持未分类或随机'ordered' . 我希望我能提供足够的代码来解决它 . 导入都在那里,这基本上是从https://v5.material.angular.io/components/table/examples复制粘贴的 .

The table

每隔一列看起来就像代码段中的一列

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

TypeScript

@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)

我很抱歉截图是德语,但你应该明白我的意思 .

Sorted

enter image description here

知道如何解决这个问题吗?

1 回答

  • 3

    要使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

相关问题