Angular mat-sort-header 5.2.4的奇怪行为 [英] Strange behavior of Angular mat-sort-header 5.2.4

问题描述

我将垫子桌子与角材的垫子分类头一起使用.但是奇怪的是，排序可以在6列中的2列(0和4)上正常工作.在对其他条目进行排序时，总是将一个条目拉到顶部，其余条目保持未排序或随机排序"状态.我希望我可以提供足够的代码来解决它.导入全部存在，并且基本上是从

有什么办法解决这个问题吗?

解决方案

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

 < ng容器matColumnDef ="status">< mat-h​​eader-cell * matHeaderCellDefmat-sort-header>我的标题文字</mat-h​​eader-cell>< mat-cell * matCellDef =让行">{{row.status}}</mat-cell></ng-container> 

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

 导出类MyDataSet {状态:字符串；} 

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

  this.datasource.sortingDataAccessor =(((item:MyDataSet，sortHeaderId:string)=> {//使用sortHeaderId编写代码以使属性脱离项目}); 

此处有一些其他信息: https://material.angular.io/components/table/api#MatTableDataSource

I am using the mat-table in combination with the mat-sort-header of angular material. But the strange thing is, the sorting works fine on 2 of 6 columns (0 and 4). When sorting the others, one entry is always pulled to the top and the rest stays unsorted or randomly 'ordered'. I hope I can provide enough code to get it solved. The imports are all there and this is basically copy-pasted from https://v5.material.angular.io/components/table/examples.

The table

every other column looks like the one in the snippet

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

I'm sorry for the screenshot being german, but you should see what I mean.

Sorted

Any idea how to fix this?

解决方案

To get matSortHeader working you need to make sure that your matColumnDef matches the property name of your datasource object. For instance:

<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 is status so your row should also have a property with the exact same name:

export class MyDataSet {
 status: string;
}

Otherwise the sort operator cannot do its job. You could also write your own dataAccessor:

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

Some further information here: https://material.angular.io/components/table/api#MatTableDataSource

这篇关于Angular mat-sort-header 5.2.4的奇怪行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！