Angular2如何對於特定數據

Question

我很難用數據顯示規格。

例如，我有一個可用的教師列表，但我只想顯示女教師。

考慮以下數據，其中'userInfo'在數組內有10個用戶數據。我只想展示女教師。

userInfo = [ 
    {gender: 'Male', Age: 25, name: John, teacherDetail : [...]}, 
    {gender: 'Female, Age: 26, name: Jessie, teacherDetail: [...]}, 
    ... 
] 

我該如何做到這一點？我應該使用過濾管嗎？

Answer 1

有幾種方法來實現這一目標：

選項1：通話功能，在分量濾波器數據

<div *ngFor="let user of getUserInfo()"> 
    show female teacher only 
</div> 

getUserInfo() { 
    return this.userInfo.filter(user => user.gender === 'Female'); 
} 

選項2：使用簡單的*ngIf來控制顯示什麼

<div *ngFor="let user of userInfo"> 
    <div *ngIf="user.gender === 'Female'"> 
    show female teacher only 
    </div> 
</div> 

2選項：使用自定義過濾器在Pipe中過濾數據（變換部分與選項1相同）

<div *ngFor="let user of userInfo | filterOnlyFemale"> 
    show female teacher only 
</div> 

transform(input: any) { 
    return this.userInfo.filter(user => user.gender === 'Female'); 
}