Angular2 如何 ngFor 特定数据

【问题标题】：Angular2 How to ngFor specific DataAngular2 如何 ngFor 特定数据
【发布时间】：2017-06-14 00:47:54
【问题描述】：

我很难用规格显示数据。

例如，我有一个可用教师列表，但我只想显示女教师。

考虑以下数据，其中 'userInfo' 在数组中有 10 个用户数据。我只想给女老师看。

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

我怎样才能做到这一点？我应该使用过滤管吗？

【问题讨论】：

标签： angular ngfor

【解决方案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>

选项3：使用自定义过滤器过滤管道中的数据（转换部分与选项1相同）

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

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

【讨论】：