在 Angular 材质表中使用过滤器时如何排除 undefined 和 null？答案

【问题标题】：How to exclude undefined and null when use filter in Angular Material Table?在 Angular 材质表中使用过滤器时如何排除 undefined 和 null？
【发布时间】：2019-04-24 01:03:27
【问题描述】：

请帮忙。有什么办法可以从过滤中排除 undefined 和 null ？因此，如果单元格值为 null 或未定义，则当用户在搜索输入中键入“null”或“undefined”时，它不会显示。

传入的表数据：

dataSource: MatTableDataSource

以下方法应用于输入：

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

【问题讨论】：

标签： angular angular-material2 angular-material-table

【解决方案1】：

我找到了答案，以防有人在寻找它。

  applyFilter(filterValue: string) {
    this.dataSource.data.forEach(element => {
      for (const key in element) {
        if (!element[key] || element[key] === null) {
          element[key] = '';
        }
      }
    });
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

applyFilter() 函数被添加到输入中，它以输入值作为参数。在过滤时，您需要检查对象的传入数据数组（它将是您在材料表中的行），并为每个对象属性检查它是否为空或未定义。如果是 - 分配空字符串。然后，这个空字符串将通过材质与其他值连接在一起进行过滤。

【讨论】：

【解决方案2】：

我猜你正在寻找那个：

 applyFilter(filterValue: string) {

    if (!!filterValue) {
       this.dataSource.filter = filterValue.trim().toLowerCase();
    }

 }

【讨论】：

它检查用户是否在输入中输入了一些东西，我需要其他行为。表格中的单元格的值未定义或为空（在输入数据对象中，某些键没有值或有值但为空）。 BUt 材质过滤方法将未定义作为字符串，如果用户在输入中输入“未定义”，它会显示此单元格。但它不应该，因为实际上单元格中没有任何价值
那你需要改进if条件吗？ if (!!filterValue && filterValue !== 'undefined') ，考虑到用户是否将 undefined 写为字符串。
用户可能只输入“d”，由于 d 是字符串“undefined”的一部分，它在过滤后显示。我需要从过滤中排除单元格数据，不适用于过滤器（实际上是输入字符串），用户应该可以放任何东西