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

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 的概念，相反您应该创建您的自定义管道，如下所示，

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>