Angular ngForパイプを使用して、オブジェクトの配列をオブジェクトの配列にフィルタリングする方法を教えてください。

Question

私は2つの選択肢があります。 Divisions

ため

Leaguesの一つ一つは、私が選択されているものLeagueに応じて、DivisionsをフィルタリングしますPipe作成します。

以下のデータを示します。 Random Beer Leagueを選択した場合は、Divisions selectのオプションとして表示されるのは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 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リンクを更新した。このPlnkr