Ionic 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ループ内で滞在して行うことができるものはありますか？

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

を、あなたがtypeし、元のオブジェクトxを持っているときに、あなたのような内側の配列でxオブジェクトを反復処理することができます。

Answer 1

あなたはion-listタイプのあなたの反復を持つことによってこの問題を解決することができます：

<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> 

ここでは、 `<イオンアイテムsliding`に` type`が*オブジェクト*にアクセスするためIinはPLUNKER