mat-sort 以空值升序到最后

Question

我有一个带有日期的 mat-sort-header。我想根据日期对 table 数据进行升序排序，但希望最后显示空日期。问题是当我按升序排序时，首先显示空日期。

    <table  mat-table [dataSource]="dataSource" class="list-table list-table"
     matSort matSortActive="due_date" matSortDirection="asc" matSortDisableClear>   
     
     <ng-container matColumnDef="due_date">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "DUE DATE" | translate }}</th>
        <td mat-cell *matCellDef="let element">
          <span *ngIf="element?.due_date!==null">{{ element.due_date | dateTranslation }}</span>
          <span *ngIf="element?.due_date==null">{{'NO DUE DATE'|translate}}</span>
        </td>
      </ng-container>

按升序排序时显示空值的选项有哪些？

Answer 1

我的解决方案是，进行自定义排序并挂接到 ngAfterViewInit：

 ngAfterViewInit() {
  this.dataSource.sortData = (data, sort: MatSort) => {
  let sortedData = [];
  sortedData = data.sort((a, b) => {
    const direction = this.getSortingOrder(sort.direction, a, b);
    if (!direction[0][sort.active] || !direction[1][sort.active]) {
      return sort.direction === "asc" ? 0 : -1;
    } else {
      return direction[0][sort.active]
        .toString()
        .localeCompare(direction[1][sort.active]);
    }
  });
  return sortedData;
   };
 }


  getSortingOrder = (order, a, b) => {
    const sorted = order === "asc" ? [a, b] : [b, a];
    return sorted;
  }

这将在按升序排序时将空值推到最后

Answer 2

我有一个类似的问题，即“当单击排序按钮时忽略空值，因此它们总是打印在 table 的末尾”。我是这样解决问题的：

覆盖 MatTableDataSource 的 sortingDataAccessor 方法
检查项目属性值
如果值为空，则检查排序顺序
根据排序顺序：返回（可能的）最高/最低值，以便具有空值的行始终位于 table 的末尾（在您的情况下，您将反转返回值） .

这是一个代码示例：

this.rankingData = new MatTableDataSource();
this.rankingData.sortingDataAccessor = (item, property) => {
    if(null == item[property]) {
      if("desc" == this.sort.direction) return '\u0000'+'\u0000'+'\u0000';
    return '\uFFFF'+'\uFFFF'+'\uFFFF';
  }
  return item[property];
};

Answer 3

简短的解决方案！如果value为null可以加一个unreal big number，所以肯定把这个item放在最下面

this.dataSource.sortingDataAccessor = (item, property) => {
  return item[property] || 9999999999999;
};

mat-sort 以空值升序到最后

mat-sort ascending with null values to last

angular-material

angular

mat-table