使用*ngFor的Angular get数组表单对象
使用*ngFor的Angular get数组表单对象
提问于 2019-08-23 17:32:00
我有以下JSON struncture：
{
"vt1hourlyForecast": {
"processTime": [
"2019-08-23T13:00:00+0300",
"2019-08-23T14:00:00+0300",
"2019-08-23T15:00:00+0300"
],
"temperature": [
43,
44,
44
],
"icon": [
34,
34,
32
]
}
}我尝试使用NgFor从vt1hourlyForecast对象中获取上述数组，但l获取错误
error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.html
<ion-item *ngFor="let item of hourly">
<div style="direction: rtl;margin-inline-end: auto;">
<div>{{item.vt1hourlyForecast.processTime | date:'h:mm a'}}</div>
<div>
{{item.vt1hourlyForecast.phrase}} ,
درجة الحرارة : °{{item.vt1hourlyForecast.temperature}}
</div>
</div>
<ion-thumbnail slot="end">
<img src="assets/icon/{{item.vt1hourlyForecast.icon}}.png">
</ion-thumbnail>
</ion-item>代码
this.http.get("xxxxxxxxx")
.subscribe(data => {
this.hourly = data
console.log("forecast " + this.hourly)
})有什么方法可以使用NgFor获得这些数组吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-08-23 17:38:04
实际上，您需要迭代一个内部数组，并根据索引获取其他值。目前您正试图迭代不可迭代的对象。
<ng-container *ngIf="hourly && hourly.vt1hourlyForecast"> <!-- check it's defined -->
<ion-item *ngFor="let time of hourly.vt1hourlyForecast.processTime;let i = index">
<div style="direction: rtl;margin-inline-end: auto;">
<div>{{time | date:'h:mm a'}}</div>
<div>
{{hourly.vt1hourlyForecast.phrase[i]}} ,
درجة الحرارة : °{{hourly.vt1hourlyForecast.temperature[i]}}
</div>
</div>
<ion-thumbnail slot="end">
<img src="assets/icon/{{hourly.vt1hourlyForecast.icon[i]}}.png">
</ion-thumbnail>
</ion-item>
</ng-container>Stack Overflow用户
发布于 2019-08-23 17:44:39
您应该重新安排json以反映数组结构，如下所示
[
{
"processTime": "2019-08-23T13:00:00+0300",
"temperature": 43,
"icon": 34
},
{
"processTime": "2019-08-23T14:00:00+0300",
"temperature": 44,
"icon": 34
},
{
"processTime": "2019-08-23T15:00:00+0300",
"temperature": 44,
"icon": 32
}
]相应的html可能如下所示：
<ion-item *ngFor="let item of hourly">
<div style="direction: rtl;margin-inline-end: auto;">
<div>{{item.processTime | date:'h:mm a'}}</div>
<div>
درجة الحرارة : °{{item.temperature}}
</div>
</div>
<ion-thumbnail slot="end">
<img src="assets/icon/{{item.icon}}.png">
</ion-thumbnail>
</ion-item>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57623459
复制相关文章
相似问题
腾讯云开发者
