离子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)，也就是["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>

这是一个