我有一个带日期的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>
通过升序显示时,显示空值到最后的选项有哪些?
答案 0 :(得分:0)
我的解决方案是,进行自定义排序并连接到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值推到最后
答案 1 :(得分:0)
我有一个类似的问题,那就是“单击排序按钮时忽略空值,以便始终将它们打印在表的末尾”。 我这样解决了这个问题:
以下是代码示例:
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];
};