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

Question

我有2个选择.

一个为Leagues一个为一个Divisions

我想根据所选内容创建一个Pipe过滤器.DivisionsLeague

提供以下数据.如果我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显示设置

*注意 - plunker中的数据是硬编码的,但在我的应用程序中设置了Observable.

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