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

Question

我有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是硬编码，但在我的应用程序设置了观测。

Answer 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