Angular2 ngFor 遍历 JSON
Angular2 ngFor Iterating over JSON
我是 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
未定义...
我希望有人能告诉我,我做错了什么 ;)
由于文件夹包含数组,它应该与 *ngFor
一起存在。 ?.
运算符将在文件夹数组可用于绑定时进行绑定。
注意:使用异步调用时,应使用?.
运算符。 静态数据不需要。
应该是,
*ngFor="let folder of status.recfolders?.folder"
您应该使用 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>
我是 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
未定义...
我希望有人能告诉我,我做错了什么 ;)
由于文件夹包含数组,它应该与 *ngFor
一起存在。 ?.
运算符将在文件夹数组可用于绑定时进行绑定。
注意:使用异步调用时,应使用?.
运算符。 静态数据不需要。
应该是,
*ngFor="let folder of status.recfolders?.folder"
您应该使用 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>