如何将过滤器管道添加到具有未定义值的对象数组的属性

Question

我正在做一个 Angular 8 项目，我有一个包含以下值的对象数组：

let studentArray = [ {
 Name: 'Anu',
 Mark: 50,
 IsPassed: true
},
{
 Name: 'Raj',
 Mark: 20,
 IsPassed: false
},
{
 Name: 'Tom',
 Mark: 15
}]

在这里，您可以看到 Raj 和 Tom 是不及格的学生。我只需要显示失败学生的详细信息。为了过滤这个数组，我添加了一个filter.pipe.ts，代码如下：

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

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(list: any[], key: string, value: any): any {
    return list.filter(i => i[key] === value);
  }

}

然后我在 HTML 页面上添加了过滤器管道，如下所示：

<div *ngFor="let item of studentArray | filter : 'IsPassed' : false;"> 
....
....
</div>

我无法使用 filter.pipe.ts 过滤此数组。这里有什么问题吗？

实际上，'Tom' 的 'IsPassed' 属性是 'undefined' 并且可以为空属性。我需要将 undefined 视为 'false'。但是考虑到我的要求，我无法从 .ts 文件中过滤 studentArray。我需要一个解决方案来从 HTML 页面本身过滤这个数组。

我已将我的代码添加到以下 'stackblitz' link:

https://stackblitz.com/edit/filter-pipe-puagzk?file=app%2Fhello.component.ts

Answer 1

您没有检查属性是否存在，因此更正 return 部分并查看它是否有效：

return list.filter(i => i[key] && i[key] == value);

Answer 2

你必须先评估你是要与真还是假进行比较。然后检查哪个条目匹配。

return list.filter(i => (value) ?  !!(i[key]) : !(i[key]));

如何将过滤器管道添加到具有未定义值的对象数组的属性

How to add filter pipe to a property of an array of object having undefined value

html

javascript

typescript

angular-pipe

angular

如何将过滤器管道添加到具有未定义值的对象数组的 属性

How to add filter pipe to a property of an array of object having undefined value

html

javascript

typescript

angular-pipe

angular

如何将过滤器管道添加到具有未定义值的对象数组的属性