如何忽略 Angular 材料表中的 NULL 值排序答案

【问题标题】：How to ignore NULL values Sorting in Angular Material Table如何忽略 Angular 材料表中的 NULL 值排序
【发布时间】：2019-08-16 15:32:36
【问题描述】：

我正在向表中添加一行，以便添加一条新记录，并且无论排序标题（asc、desc 还是无），我都希望将该行保持在顶部。

当没有定义 order 或 asc 时，该行位于顶部，但当单击 desc order 时，该行位于底部。

关于如何将空值（数据源中的新行对象具有用于列排序的空值）始终保持在顶部的任何想法？

无订单即可： https://i.stack.imgur.com/J3Ou1.png

Order Asc 也可以： https://i.stack.imgur.com/xFolC.png

但是订单描述不行： https://i.stack.imgur.com/bsksj.png

【问题讨论】：

标签： angular sorting null angular-material mat-table

【解决方案1】：

当值为null 时，您可以通过覆盖排序机制将其“替换”为在Z 之后排序的字符，例如欧米茄 (Ω)。

this.dataSource.sortingDataAccessor = (item, key) => item[key] || 'Ω';

排序机制会返回键值对，但是当没有找到值时，它会返回欧米茄字符，但只用于排序，所以不会出现在你的表格中.

【讨论】：

【解决方案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];
};

【讨论】：

第二个if条件应该是这样的if("asc" === this.sort.direction) ...

【解决方案3】：

角度 MatSortModule 有一个名为“取消注册”的属性。您可以尝试将此属性添加到要从 MatSortables 中删除的行中

来源：https://material.angular.io/components/sort/api

【讨论】：