Question

我有一个输入文字，其区域如下所示：

<input type="text" [(ngModel)]="areaSearch">

而且，我有一个列表可根据area_name属性

输入的区域进行过滤

<ul *ngIf="areaSearch">
    <li *ngFor="let area of areaList | filter : {area_name: areaSearch} ">
        ...
    </li>
</ul>

收到The pipe 'filter' could not be found之类的错误。任何人都可以帮我解决这个问题吗？..

Answer 1

Angular没有名为 filter 的概念，您应该按如下方式创建 custom pipe ，

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'filterByArea'})
export class FilterByStatusPipe implements PipeTransform {

    transform(areaList : any, areaname: string): any[] {
        if (areaList) {
            return areaList.filter((listing: any) => listing.area_name === areaname);
        }
    }
}

并按如下方式使用，

<ul *ngIf="areaSearch">
    <li *ngFor="let area of areaList | filterByArea:areaSearch  ">
        ...
    </li>
</ul>

Answer 2

我会将组件中的// this goes in the component get filteredAreaList() { return this.areaList.filter(v => v.area_name === this.areaSearch) }定义为只读：

filteredAreaList

这将确保areaList仅包含area_name属性areaSearch属性与当前filteredAreaList

相匹配的元素

然后在模板中，只需迭代<ul *ngIf="areaSearch"> <li *ngFor="let area of filteredAreaList "> ... </li> </ul>

areaList

这种方法的一个好处是逻辑不在模板之外，并且很容易扩展（例如：如果将来显示的列表依赖于其他组件属性）。我也喜欢Sajeetharan的管道解决方案。

更新：2019-05-17

自从我写完答案以来，已经有近两年的Angular了，我对阅读我和Sajeetharan的接受回应有一点点新观点。我的解决方案开销较小;它也更容易实施;步骤更少 - 无需创建管道，在模块中声明它，确保组件的模块也可以访问它等。但是，如果filteredAreaList是一个大数组，Sajeetharan的解决方案将运行得更快，因为默认情况下，管道逻辑仅在输入发生变化时运行。

这意味着在实践中，一旦用户输入区域名称，过滤器将只执行一次并完成，而使用我的解决方案，HANDLER DW ? ;◄■■ VARIABLE IN DATA SEGMENT. ... ;;file is opening mov ah,3dh lea dx,filename mov al,0 int 21h jc err1 MOV HANDLER, AX ;◄■■ PRESERVE FILE HANDLER. ;CLOSE FILE. MOV AH, 3EH ;◄■■ MOV BX, HANDLER ;◄■■ HANDLER OF FILE TO CLOSE. INT 21H ;delete the file NOW IS working mov ah, 41h lea dx,filename int 21h getter将执行每个更改检测周期。如果你只有几十个区域，那么差别是微不足道的，但是如果你有一个非常大的区域，它就很重要。

如何根据Angular2中对象数组中的属性值进行过滤？

2 个答案: