在角度2中迭代嵌套的JSON数组

时间:2017-05-03 08:32:12

标签: angular typescript

以下是我的json文件。我想只迭代*ngFor数组。以下内容在<ul *ngFor="let rew of gdata?.rewards"> <li> {{rew.rewardID}} </li> </ul> 中迭代。 我像这样迭代

gdata = [
 {
"id": 18,
"gname": "Learning Ramayanam",
"goalCategory": "Education",
"goalSubCategory": "Half-yearly",
"goalDesc": "good",
"rowStatusCode": "I",
"createID": "1",
"createTS": null,
"updateID": "Ram",
"updateTS": null,
"rewards": [
  {
    "rewardID": 25,
    "rewardName": "Amazon - pts",
    "rowStatusCode": "I",
    "createID": "1",
    "createTS": 1493785361000,
    "updateID": null,
    "updateTS": null
  },
  {
    "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"
  }
 },

如果有人请帮助我,我已经搜索了很多。

<input type=file onClick={(e) => e.stopPropagation()}/>

1 个答案:

答案 0 :(得分:2)

如果gdata中只有一个项目,则可以使用单个ngFor执行以下操作:

<ul>
    <li *ngFor="let rew of gdata[0]?.rewards">{{rew.rewardID}}</li>
</ul>

如果gdata中有多个项目,则可能需要嵌套ngFor来生成多个列表。

<ul *ngFor="let data of gdata">
    <li *ngFor="let rew of data?.rewards">{{rew.rewardID}}</li>
</ul>

参考On Firefox.