角度为2

Question

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

看看上面的图片，你可以看到板球奖励打印在两个td：s中，我想为板球创建两条线，一条用Reward 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"
      }
   }
]

Answer 1

我们可以在这里使用.parentdiv:fist-child{ margin-right: 1%; width:49%; } .parentdiv:last-child{ margin-left: 1%; width:49%; } 来达到您想要的结果，我们将每个对象包装在容器中。所以你的模板看起来像这样：

ng-container

Demo