如何编写 Angular ngFor 管道以按对象属性过滤对象数组？答案

【问题标题】：How can I write an Angular ngFor pipe to filter array of objects by object property?如何编写 Angular ngFor 管道以按对象属性过滤对象数组？
【发布时间】：2017-05-26 23:23:03
【问题描述】：

我有 2 个选择。

Leagues 一个，Divisions 一个

我想创建一个Pipe，它将根据选择的League 过滤Divisions。

给出下面的数据。如果我选择Random Beer League，则只有TwoFour 和SixPack 应显示为Divisions 选择的选项。

leagues = [
  {id: 1, leagueName: 'Recreation League' },
  {id: 2, leagueName: 'Random Beer League' } 
];

divisions = [
  {id: 1, divisionName: 'SoGreen', leagueId: 1, leagueName: 'Recreation League' },
  {id: 2, divisionName: 'Yellow', leagueId: 1, leagueName: 'Recreation League' },
  {id: 3, divisionName: 'TwoFour', leagueId: 2, leagueName: 'Random Beer League' },
  {id: 4, divisionName: 'SixPack', leagueId: 2, leagueName: 'Random Beer League' }
];

PLUNKER to show the setup

*注意 - plunker 中的数据是硬编码的，但在我的应用设置中它是 Observable。

【问题讨论】：

标签： javascript angular angular2-pipe

【解决方案1】：

我创建了一个自定义管道并用它来过滤除法下拉列表。

@Pipe({
    name: 'myfilter',
    pure: false
})

export class MyFilterPipe implements PipeTransform {
    transform(items: any[], args: any[]): any {
        return items.filter(item => item.leagueName.indexOf(args.leagueName) > -1);
    }
}


<option *ngFor="let division of divisions | myfilter:leagueSelected" [ngValue]="division">{{division.divisionName}}</option>

请查看Plnkr

【讨论】：

我已更新 plnkr 链接。原因是 angular2 将“ngOnChange”事件重命名为“onChange”。