Question

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

    <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;
  }

这将按升序将null值推到最后

Answer 2

我有一个类似的问题，那就是“单击排序按钮时忽略空值，以便始终将它们打印在表的末尾”。我这样解决了这个问题：

忽略MatTableDataSource的sortingDataAccessor方法
检查商品属性值
如果该值为空，则检查排序顺序
按照排序顺序：返回（可能）最高/最低值，以使具有空值的行始终位于表的末尾（在您的情况下，您将反转返回的值）。

以下是代码示例：

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];
};

以空值升序的mat-sort升序

2 个答案: