Angular 8中如何为含undefined属性的对象数组添加filter过滤管道

问题根因 #

你当前使用的过滤管道采用了===严格相等运算符进行判断，而undefined === false的运算结果为false，因此未定义IsPassed属性的Tom记录无法被匹配，最终过滤结果不符合预期。

解决方案 #

方案1：调整管道逻辑（推荐） #

仅需要修改filter.pipe.ts中的判断逻辑，无需改动原学生数组，即可满足可空属性按false处理的需求：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
  transform(list: any[], key: string, value: any): any {
    // 用!!将属性值强制转为布尔类型，undefined、null都会被转为false
    return list.filter(i => !!i[key] === value);
  }
}

修改完成后你原本的HTML调用代码无需任何改动，即可正确过滤出Raj和Tom两条不及格的学生记录。

方案2：纯HTML实现（无需修改管道代码） #

如果不希望调整管道代码，也可以直接在模板中通过*ngIf补充判断逻辑，完全不需要在组件TS中处理原数组：

<div *ngFor="let item of studentArray">
  <ng-container *ngIf="item.IsPassed === false || item.IsPassed === undefined">
    <!-- 此处放置学生明细展示代码 -->
  </ng-container>
</div>

内容的提问来源于stack exchange，提问作者Vignesh VS