從數組和對象Angular2 / 4中讀取對象名稱

Question

我對如何讀取這些數組和對象中的project.name感到困惑？ 我想顯示project.name，構建project.description。 小...？ 如何在html表行中迭代它？ 這是我在下面所做的。 希望你們能幫忙

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

Answer 1

我認為你需要改變它：

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

首先循環項目，獲取每個項目的組織，然后從組織中循環內部項目以獲取名稱

Answer 2

您的迭代應如下所示：

<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