Javascript angular 2中的嵌套json

下面是我想要绑定到表中的json。查看JSON中的

gname:cricket

，您可以看到它有两个奖励（Flipkart和Amazon）

查看上图，您可以看到板球奖励打印在两个

td

：s中，我想为板球创建两行，一行带有

raward

flipkart，一行用于亚马逊），因此我的预期输出为：

这是我的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"
      }
   }
]

---

我们可以在这里使用

ng container

来达到您想要的结果，我们将您拥有的每个对象包装在一个容器中。因此，您的模板如下所示：

目标名称
类别
奖励
{{goal.gname}
{{goal.goalCategory}
{{奖励.奖励名称}

---

现在还不清楚你想要什么，你想实现什么，也不清楚你到目前为止做了什么。至少从我的理解来看，只要看看我的json id=21，它就有两个奖励。我必须像这样绑定row1->21，cricket，sports，sports，flipkart-pts row2->21，cricket，sports，sports，amazon-900000ptsptsa据我所知，在

表中有多个
tbody
是无效的html。根据这一点，它是有效的，但如果我错了，
tbody
s也可以用
ng容器替换：）啊，是的，根据HTML4.0.1规范，它显然是有效的。