Angular2 ngFor 迭代 JSON答案

【问题标题】：Angular2 ngFor Iterating over JSONAngular2 ngFor 迭代 JSON
【发布时间】：2017-03-08 08:33:51
【问题描述】：

我对 Angular2 还很陌生，我想读出一个 json 文件。它工作正常，我从 REST 客户端获取文件，我可以将文件保存在组件的局部变量中，而且我能够读取变量的属性。现在我正在尝试使用 ngFor 读取其他属性（数组），但这不起作用。这是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 未定义... 我希望有人能说我，我做错了什么；）

【问题讨论】：

你必须使用 Elvis 运算符来避免self.context 错误：*ngFor="let folder of status.recfolders?.folder"
是的，没错，谢谢！猫王运营商是解决方案；）

标签： arrays json angular ngfor

【解决方案1】：

由于文件夹包含数组，它应该与 *ngFor 一起存在。当文件夹数组可用于绑定时，?. 运算符将进行绑定。

注意：当您使用 异步调用 时，应使用 ?. 运算符。 静态数据不需要。

应该是，

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

【讨论】：

是的，没错，谢谢！猫王操作员是解决方案；）
你能编辑答案，所以我可以说它是正确的吗？ ;)

【解决方案2】：

您应该使用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>

【讨论】：