角度2特定のデータを指定する方法

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：

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

オプション3を表示するかを制御するために、単純な*ngIfを使用するには：パイプでデータをフィルタリングするカスタムフィルタを使用する（変換部分はOption1と同じ）

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

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