离子2:遍历对象列表

Question

我正在尝试创建一个显示客户列表的视图,我遇到了一个问题,因为它是一个对象,而且是因为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)aka ["Consultation", "Re-evaluation", "Meeting", "Testing"].

在我看来:

<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循环中吗？

Answer 1

您可以通过在类型中进行迭代来解决此问题ion-list:

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

然后当你拥有type原始对象时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