2017-10-24 9 views
1

이러한 배열과 객체 안에서 project.name을 어떻게 읽을 수 있는지 혼란 스럽습니다. project.name을 표시하고 project.description을 작성하고 싶습니다. 작은...? html 테이블 행에서이를 반복 할 수 있습니까? 여기에 내가 한 일이 있습니다. 너희들이 도와 수 있기를 바랍니다배열 이름과 객체의 내부에서 객체 이름을 읽음 Angular2/4

{ 
    "token": "eyJ": [ 
    { 
     "id": 1, 
     "organization_id": 1, 
     "created_at": "2017-10-24 05:06:37", 
     "updated_at": "2017-10-24 07:38:24", 
     "organization": { 
     "id": 1, 
     "name": "Malayss", 
     "logo": "default.png", 
     "created_at": "2017-10-24 10:54:51", 
     "updated_at": "2017-10-24 10:54:51", 
     "projects": [ 
      { 
      "id": 1, 
      "name": "House", 
      "description": "Small", 
      "organization_id": 1, 
      "created_at": "2017-10-24 02:41:50", 
      "updated_at": "2017-10-24 02:41:50", 
      "material_projects": [ 
       { 
       "id": 1, 
       "material_id": 1, 
       "project_id": 1, 
       "quantity": 10, 
       "unit": "pcs", 
       "purchased": 0, 
       "balance": 10, 
       "created_at": "2017-10-24 02:42:14", 
       "updated_at": "2017-10-24 02:42:14", 
       "material": { 
        "id": 1, 
        "sku": "1320484", 
        "name": "Cement", 
        "created_at": "2017-10-24 02:41:22", 
        "updated_at": "2017-10-24 02:41:22" 
       } 
       } 
      ], 
      "project_services": [ 
       { 
       "service_id": 1, 
       "project_id": 1, 
       "unit": "square feet", 
       "created_at": "2017-10-24 02:42:14", 
       "updated_at": "2017-10-24 02:42:14", 
       "service": { 
        "id": 1, 
        "sku": "734676", 
        "name": "Cleaning", 
        "created_at": "2017-10-24 02:41:36", 
        "updated_at": "2017-10-24 02:41:36" 
       } 
       } 
      ] 
      } 
     ] 
     } 
    } 
    ] 
} 

HTML

<tr *ngFor="let project of projects.organization"> 
        <td *ngFor="let inner of projects">{{ inner.name }}</td> 
</tr> 

답변

1

귀하의 반복은 다음과 같아야합니다

<table> 
    <ng-container *ngFor="let project of projects.projects"> 
    <tr> 
     <th>Name</th> 
     <th>Description</th> 
    </tr> 
    <tr *ngFor="let inner of project.organization.projects"> 
     <td>{{inner.name}}</td> 
     <td>{{inner.description}} 
    </tr> 
    </ng-container> 
</table> 

DEMO

+0

고마워. 그러나 나는 또한 설명이있다. 나는 이것을했고 그것은보기를 파괴했다. {{inner.name}} {{inner.description}} –

+0

두 개의 내부 프로젝트가 있고 첫 번째 프로젝트 옆에 넣습니다. –

+0

업데이트 확인, 원하는 것입니까? – Alex

3

나는 당신이 그것을 바꿀 필요가 있다고 생각 :

<tr *ngFor="let project of projects"> 
<td *ngFor="let inner of project.organization.projects">{{ inner.name }}</td> 
</tr> 

첫 번째 루프 프로젝트를위한 조직을 얻을 각 프로젝트를 반복하고 내부 프로젝트를 반복하여 조직의 이름을 얻습니다.

+1

이이 이후이이 upvotes에 대한 그냥 궁금 –

+0

을 끝낼 수있는 방법이 작동하지 않습니다입니까? ;) – Alex

+0

@ AJT_82, LOL me too .... –