Question

我在ngFor循环中显示对象列表，我想用管道过滤该列表。

我的研究使我想到了这一点：

filter-by.pipe.ts：

import { Pipe, PipeTransform } from '@angular/core';
import { UserLink } from '../_models/user-link';

@Pipe({
    name: 'filterBy'
})
export class FilterByPipe implements PipeTransform {
    transform(items: User[], isActive: boolean): any {
        if (!items) { return []; }
        return items.filter(x => x.isActive === isActive);
    }
}

在my.component.html中：

<tr *ngFor="let item of items$|async|filterBy: {isActive: false}">
    <td>{{item.firstname}}</td>
    <td>{{item.lastname}}</td>
    <td>{{item.age}}</td>
</tr>

但是结果不是我期望的：我的数组为空。

我想让它起作用吗？

我在这个stackblitz（https://stackblitz.com/edit/angular-46atle）中尝试了我的解决方案，并且它可以工作。但是我仍然无法在我的项目中使用它。我检查了对象的属性以及代码的其余部分，但看不到错误在哪里

[编辑]

问题解决了！在我正在过滤的对象与我认为在过滤的对象之间缺少转换。初学者的错误！

感谢您的光临！

Answer 1

您不必传递对象，您的管道接受数组和布尔值作为输入。只需尝试

<tr *ngFor="let item of items$|async|filterBy: false">

Answer 2

您不应使用管道对列表进行过滤或排序：

https://angular.io/guide/pipes#no-filter-pipe

Angular团队和许多经验丰富的Angular开发人员建议将过滤和排序逻辑移至组件中本身。

例如，您可以将数组转换为可观察的数组，并使用可管道的RxJS运算符应用过滤逻辑：

Rx.Observable.from(items)
    .pipe(
         filter(item => item.size >= 1),
         map(item => "Item name: " + item.name),
         // more filtering logic
      ) 
    .subscribe(item => console.log(item))
);

Answer 3

您可以像这样过滤数组：

 <tr *ngFor="let item of _items | filter:{label: filterText}">{{ item.label }}</li>

https://long2know.com/2016/11/angular2-filter-pipes/

带管道的Angular 6 Filter可观察数组

3 个答案: