각도 2 ngFor for 중첩 된 json

Question

새로운 각도 2. 나는 Json 파일을 가져올 수 있습니다. 일부 json 파일을 얻을 수 있지만 json 파일 안의 배열은 가져올 수 없습니다. 예를 들어, 두 번째 UL의 첫 번째 UL 및 IMU 장치에서 GPS 장치를 시각화하고 싶습니다. 그들이 배열되어 있더라도 목록 둘 모두에 IMU 장치의 동일한 데이터가 나타납니다.

JSON 파일

"config" : [ 
    { 
     "id"  : "gps_device", 
     "name" : "GPS Device", 
     "type" : "String", 
     "widget" : "dropdown", 
     "fields" : [ "Disabled", "XSensIMU", "GenesysADMA"], 
     "default" : "Disabled" 
    }, 
    { 
     "id"  : "imu_device", 
     "name" : "IMU Device", 
     "type" : "String", 
     "widget" : "dropdown", 
     "fields" : [ "Disabled1", "XSensIMU1", "GenesysADMA1"], 
     "default" : "XSensIMU" 
    } 
] 

//here I should get loop of GPS device array 
 
<h1>Gps Device</h1> 
 
<ul *ngFor="let drop of config[0]"> 
 
    <li *ngFor="let sub of drop.fields"> {{sub}}</li> 
 
<ul> 
 
//here array of IMU device 
 

 
<h1>IMU Device</h1> 
 
<ul *ngFOr="let drop1 of config[1]"> 
 
    <li *ngFOr="let sub1 of drop.fields"> {{sub1}}</li> 
 
<ul>

Answer 1

2 개 그룹으로 장치를 분리하기 위해이 코드를 시도하십시오 : 설정에

<div *ngFor="let drop of config"> 
    <ng-container *ngIf="drop.id === 'imu_device'; else gpsBlock"> 
    <h1>IMU Device</h1> 
    <ul> 
     <li *ngFOr="let sub1 of drop.fields"> {{sub1}}</li> 
    </ul> 
    </ng-container> 
    <ng-container #gpsBlock> 
    <h1>Gps Device</h1> 
    <ul> 
     <li *ngFOr="let sub1 of drop.fields"> {{sub1}}</li> 
    </ul> 
    </ng-container> 
</div> 

당신 루프, 및 GPS 또는 IMU 사업부에 조건부로 기기 표시

편집 : 또는 당신이 이런 식으로 일을 할 수

<ng-container *ngFor="let drop of configs"> 
    <h1>{{drop.name}}</h1> 
    <ul> 
     <li *ngFor="let field of drop.fields">{{field}}</li> 
    </ul> 
    </ng-container> 

Answer 2

당신은 *ngFor

config[0]으로는 동일합니다 사용하여 개체를 반복 할수 없어

에

{ 
    "id"  : "gps_device", 
    "name" : "GPS Device", 
    "type" : "String", 
    "widget" : "dropdown", 
    "fields" : [ "Disabled", "XSensIMU", "GenesysADMA"], 
    "default" : "Disabled" 
} 

어느 이이 아니고, iterable이 아닙니다.

그래서 배열을입니다 config 배열을 반복

이

<h1>IMU Device</h1> 
<ul *ngFOr="let drop1 of config"> 
    <li *ngFOr="let sub1 of drop.fields"> {{sub1.name}}</li> 
<ul>