如何编写Angular的ngFor管道以通过对象属性过滤对象数组？

Question

如何编写Angular的ngFor管道以通过对象属性过滤对象数组？

javascriptangularangular2-pipe

5

我有两个选择框。

一个是用于“联赛（Leagues）”，另一个是用于“分区（Divisions）”。

我想创建一个“管道（Pipe）”，根据所选的“联赛（League）”筛选“分区（Division）”。

给定以下数据。如果我选择“随机啤酒联赛（Random Beer League）”，则“分区（Divisions）”选择框中只应显示“TwoFour”和“SixPack”作为选项。

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演示设置

*注意-在plunker中的数据是硬编码的，但在我的应用程序设置中是可观察的。

- locnguyen

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hardik Patel · Accepted Answer

我创建了一个自定义管道，并将其用于过滤除法下拉菜单。

@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。