如何編寫一個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