Ionic 2: Schleife durch Liste der Objekte

Question

Ich versuche, eine Ansicht zu erstellen, die eine Liste der Clients anzeigt, und ich bin auf ein Problem wegen der Tatsache, dass es ein Objekt ist und wegen Ionics HTML-Typen.

Hier ist mein Ziel:

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"}] 
} 

und definiere ich appointment_types als Object.keys(x) aka ["Consultation", "Re-evaluation", "Meeting", "Testing"].

Aus meiner Sicht:

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

Gibt es etwas, das ich in der appointment_types Laufenden bleiben tun kann?

Answer 1

Sie können dieses Problem lösen Ihre Iteration des in ion-list, indem:

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

und dann, wenn Sie die type und Ihre ursprüngliche Objekt haben x, können Sie das x Objekt mit inneren Arrays iterieren wie :

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

wie dies also Ihre vollständige Vorlage aussehen würde:

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

Hier ist ein PLUNKER