Angular2如何ngFor特定數據

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>

Option3：使用自定義過濾器，該過濾器在Pipe處過濾數據（轉換部分與Option1相同）

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

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