Material 存在空对象时排序不起作用

Question

我编写了一个代码，如果行数少于 5，则添加空行，但现在排序功能不起作用。当我删除 for 循环时，它可以工作，但是当我把它放回去时，它却不起作用。有什么办法可以解决这个问题吗？

        this.userData = data.info;
        //when i remove this if condition the sorting works
        if(this.userData.length <=5){
          for (let index = 0; index <= 6 - this.userData.length; index++) {
              this.userData.push(Object.create(null));
          }
        }
        this.dataSource = new MatTableDataSource(this.userData);
        this.dataSource.sort = this.sort;
        this.dataSource.paginator = this.paginator;

我真的需要 table 有空行所以我卡住了

Answer 1

我将从用 while 循环更改 if 和 for 循环开始。

while(this.userData.length <=5){
   this.userData.push(Object.create(null));
}

然后在将数据添加到 MatTableDataSource 之前对数据进行排序。此函数将使用 'name' 属性对 'userData' 对象进行排序。并将空对象发送到后面。

this.userData.sort((a,b) => (b.name) ? ((a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0)) : -1);

如果您想让用户更改排序，您应该绑定到您的 mat-table.

的 matSortChange 事件

<mat-table (matSortChange)="onSortChange($event)">

并在每次调用此事件时重新排序。

onSortChange(sort: MatSort): void {
   const data: Array<UserData> = this.dataSource.data.slice();
   if (!sort.active || sort.direction === '') {
      this.dataSource.data = data;
      return;
   }

   this.dataSource.data = data.sort((a, b) => {
      let isAsc: boolean = sort.direction === 'asc';
      let valSortProperty = sort.active;
      return b[valSortProperty] ? this.compare(a[valSortProperty], b[valSortProperty], isAsc) : -1;
   });

   this.dataSource = new MatTableDataSource<UserData>(this.dataSource.data);
   this.dataSource.paginator = this.paginator;
}

compare(a: any, b: any, isAsc: boolean): number {
   if(isAsc){
      return (a > b) ? 1 : ((b > a) ? -1 : 0)
   } else {
      return (a < b) ? 1 : ((b < a) ? -1 : 0)
   }
}

Material 存在空对象时排序不起作用

Material Sort not working when there are null objects

typescript

angular-material2

angular