Angular2 ng用于迭代JSON

时间:2016-10-26 05:34:12

标签: arrays json angular ngfor

我是Angular2的新手,我想读出一个json文件。 它工作,我从REST客户端获取文件,我可以将文件保存在组件的本地变量中,此外我能够读取变量的属性。 现在我试图用ngFor读取其他属性(Array),但这不起作用。 这是html:

//Working
<td>{{status.rights}}</td>
//Not working
<tr *ngFor="let folder of status.recfolders">
                                <td>{{folder.text}}</td>
                                <td>{{folder.size}}</td>
                                <td>{{folder.free}}</td>
                            </tr>

JSON:

{
  "status": {
    "rights": "full",
    "recfiles": "13",
    "recfolders": {
      "folder": [
        {
          "size": "7866296029184",
          "free": "3724003368960",
          "text": "\\\\edited\\Daten\\Videos\\Aufnahmen"
        },
        {
          "size": "59495149568",
          "free": "38696935424",
          "text": "C:\\Users\\edited\\Desktop"
        }
      ]
    }
  }
}

如果我这样试试,Angular说Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays." 如果我尝试*ngFor="let folder of status.recfolders.folder"它也不起作用,但错误是self.context.status.recfolders未定义... 我希望有人可以说我,我做错了什么;)

2 个答案:

答案 0 :(得分:2)

由于文件夹包含数组,因此应使用 *ngFor 。当文件夹数组可用于绑定时,?.运算符将执行绑定。

注意:当您使用异步调用时,应使用?.运算符。对于静态数据,它不是必需的。

应该是,

*ngFor="let folder of status.recfolders?.folder"

答案 1 :(得分:1)

您应该使用Elvis operator (?.)来避免self.context错误。

试试这个:

<tr *ngFor="let folder of status.recfolders?.folder">
      <td>{{folder.text}}</td>
      <td>{{folder.size}}</td>
      <td>{{folder.free}}</td>
</tr>