이오닉 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-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> 

다음은`이온 list`에`처음`* ngFor` <이온 아이템 sliding`, 당신은 넣어해야`에서 type` * 객체 *에 액세스 할 수있는 PLUNKER