angular – Ionic 2:遍历对象列表

我正在尝试创建一个显示客户列表的视图,我遇到了一个问题,因为它是一个对象,而且是因为Ionic的html类型.

这是我的对象:

x = { Consultation: [{name: "Joe Smith}, {name: "Jane Doe"}],
   Re-evaluation: [{name: "Joe Smith2}, {name: "Jane Doe2"}],
   Meeting: [{name: "Joe Smith3}, {name: "Jane Doe3"}],
   Testing: [{name: "Joe Smith4}, {name: "Jane Doe4"}]
}

我将appointment_types定义为Object.keys(x)又名[“咨询”,“重新评估”,“会议”,“测试”].

在我看来:

<ion-list>
  <ion-list-header *ngFor="let type of appointment_types">{{ type }}</ion-list-header>

  <!-- type is no longer defined after ion-list-header closes -->
  <ion-item-sliding class="shaded-slider" *ngFor="let client of appointment_types[type]"> 
    <ion-item>{{ client.name }}</ion-item>
  </ion-item-sliding>
</ion-list>

我可以做些什么来保持在appointment_types循环中?

最佳答案
你可以通过在ion-list中进行类型的迭代来解决这个问题:

<ion-list *ngFor="let type of appointment_types">

然后当你有类型和原始对象x时,你可以用内部数组迭代x对象,如:

<ion-item-sliding class="shaded-slider" *ngFor="let client of x[type]"> 

所以你的完整模板看起来像这样:

<ion-list *ngFor="let type of appointment_types">
  <ion-list-header >{{ type }}</ion-list-header>
  <ion-item-sliding class="shaded-slider" *ngFor="let client of x[type]"> 
    <ion-item>{{ client.name }}</ion-item>
  </ion-item-sliding>
</ion-list>

这是一个PLUNKER

转载注明原文:angular – Ionic 2:遍历对象列表 - 代码日志