Как я могу написать канал Angular ngFor для фильтрации массива объектов по свойству объекта?

У меня есть 2 выбора.

Один для Leagues и один для Divisions

Я хочу создать Pipe, который будет фильтровать Divisions в зависимости от того, что выбрано League.

Давая данные ниже. Если я выберу 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, чтобы показать настройки

* Примечание. Данные в плункере жестко закодированы, но в моем приложении он настроен как Observable.


javascript angular angular2-pipe
person locnguyen    schedule 12.01.2017    source источник

Ответы (1)


arrow_upward
9
arrow_downward

Я создал собственный канал и использовал его для фильтрации выпадающего списка.

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

person Hardik Patel    schedule 12.01.2017
comment
Я обновил ссылку plnkr. Причина в том, что angular2 переименовал событие ngOnChange в onChange. - person Hardik Patel; 19.07.2017