角度2中的嵌套json

Question

下面是我想将它绑定到表中的 json。查看 JSON 中的gname: cricket，可以看到它有两个奖励（Flipkart 和 Amazon）。

看上图，你可以看到板球奖励打印在两个td:s 中，我想为板球创建两行，一行带有Rewardflipkart 和亚马逊的一行）所以我的预期输出将是：

这是我的 JSON。

[  
   {  
      "id":18,
      "gname":"Learning Ramayanam",
      "goalCategory":"Education",
      "goalSubCategory":"Half-yearly",
      "goalDesc":"good",
      "rowStatusCode":"I",
      "createID":"1",
      "createTS":null,
      "updateID":"Ram",
      "updateTS":null,
      "rewards":[  
         {  
            "rewardID":6,
            "rewardName":"Trends - 100000pts",
            "rowStatusCode":"U",
            "createID":"1",
            "createTS":1493131878000,
            "updateID":null,
            "updateTS":null
         }
      ],
      "initiatives":{  
         "initID":17,
         "initAction":"Stop",
         "startDate":"2017-04-27",
         "targetDate":"2017-04-30",
         "rowStatusCode":"U",
         "createID":"1",
         "createTS":1493294143000,
         "updateID":null,
         "updateTS":null,
         "status":"red"
      }
   },
   {  
      "id":21,
      "gname":"cricket",
      "goalCategory":"Sports",
      "goalSubCategory":"Annual",
      "goalDesc":"ambition",
      "rowStatusCode":"I",
      "createID":"1",
      "createTS":null,
      "updateID":null,
      "updateTS":null,
      "rewards":[  
         {  
            "rewardID":23,
            "rewardName":"Amazon - 900000pts",
            "rowStatusCode":"U",
            "createID":"1",
            "createTS":1493386415000,
            "updateID":null,
            "updateTS":null
         },
         {  
            "rewardID":17,
            "rewardName":"Amazon - pts",
            "rowStatusCode":"D",
            "createID":"1",
            "createTS":1493360706000,
            "updateID":null,
            "updateTS":null
         }
      ],
      "initiatives":{  
         "initID":19,
         "initAction":"Start",
         "startDate":"2017-04-04",
         "targetDate":"2017-04-20",
         "rowStatusCode":"U",
         "createID":"1",
         "createTS":1493360896000,
         "updateID":null,
         "updateTS":null,
         "status":"grey"
      }
   },
   {  
      "id":31,
      "gname":"Learn android nogut",
      "goalCategory":"Education",
      "goalSubCategory":"Half-yearly",
      "goalDesc":"education",
      "rowStatusCode":"I",
      "createID":"1",
      "createTS":1493219925000,
      "updateID":null,
      "updateTS":null,
      "rewards":[  

      ],
      "initiatives":{  
         "initID":22,
         "initAction":"Achieve",
         "startDate":"2017-04-04",
         "targetDate":"2017-04-13",
         "rowStatusCode":"U",
         "createID":"1",
         "createTS":1493363220000,
         "updateID":null,
         "updateTS":null,
         "status":"green"
      }
   },
   {  
      "id":35,
      "gname":"Learning Japanese",
      "goalCategory":"Education",
      "goalSubCategory":"Half-yearly",
      "goalDesc":"Goal",
      "rowStatusCode":"i",
      "createID":"1",
      "createTS":1493361641000,
      "updateID":null,
      "updateTS":null,
      "rewards":[  
         {  
            "rewardID":18,
            "rewardName":"Flipkart - 5000pts",
            "rowStatusCode":"U",
            "createID":"1",
            "createTS":1493361655000,
            "updateID":null,
            "updateTS":null
         }
      ],
      "initiatives":{  
         "initID":21,
         "initAction": "Soft Skills,Communication class,Tution Center,Organic Foods,Coaching Class,Other",
         "startDate":"undefined",
         "targetDate":"undefined",
         "rowStatusCode":"U",
         "createID":"1",
         "createTS":1493363132000,
         "updateID":null,
         "updateTS":null,
         "status":"green"
      }
   }
]

Answer 1

我们可以在这里使用ng-container 来达到您想要的结果，我们将您拥有的每个对象包装在一个容器中。所以你的模板应该是这样的：

<table>
  <tbody>
    <tr>
      <th>Goal Name</th>
      <th>Category</th>
      <th>Rewards</th>
    </tr>
  </tbody>
  <!-- Let's wrap each object in a ng-container -->
  <ng-container *ngFor="let goal of goals">
    <tbody>
      <!-- Iterate the rewards of each goal -->
      <tr *ngFor="let reward of goal.rewards">
        <td>{{goal.gname}}</td>
        <td>{{goal.goalCategory}}</td>
        <td>{{reward.rewardName}}</td>
      </tr>
    </tbody>
  </ng-container>
</table>

Demo