在 Angular Material Table 中使用过滤器时如何排除 undefined 和 null?

伊万维尔奇

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

传入表数据:

dataSource: MatTableDataSource

以下方法应用于输入:

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
伊万维尔奇

我找到了答案,以防万一有人在寻找它。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Angular + Material Table - 如果我使用 un Pipe 过滤器,如何拖放行

Angular Material-通过多个过滤器和多个过滤器值同时过滤的表

添加排序和分页时,Angular Material Table没有数据

Angular Material Table-拖动和滚动时,拖动的行不会放在正确的位置

Angular 9 管道变换数组,使用过滤器和过滤器函数返回可观察值

Angular Material Table filterPredicate过滤对象

Angular 6 - 无法读取 null 的属性,使用过滤器方法

如何使用Angular Material和CSS

如何使用Karma和Sinon监视Angular过滤器

在jTable中使用过滤器搜索时如何同时接受大写和小写字母?

如何整合 Ionic 3 和 Angular Material?

Angular Material:使用 errorStateMatcher 和 ngFor

如何在Power Bi中使用默认过滤器和可用过滤器?

在Angular 4中使用过滤器管道

在 Ant Design 中使用过滤器和 ProTable

使用多个过滤器 Angular Material 表

区分null和undefined

如何在javapairrdd中使用containsAll和contains来使用过滤器

如何在 Angular/Express/MongoDB 中使用过滤器创建搜索?

如何在ng-if和变量中使用过滤器?

如何在使用过滤器和包含在柏树中时使用变量

使用服务时,Angular Material Table无法分页

使用Angular Material(MatBottomSheet)和SSR时AWS Lambda超时

Angular Material Table 在渲染超过 20 列时折叠

Angular Material Table仅在单击表格时显示项目

在 Angular Material Table 上未选择元素时返回 false

如何使用Angular Material创建粘性页脚和页眉

无法在Angular JS中使用ng-hide和过滤器显示“未找到”

使用Angular Material Table Exporter导出分页垫桌