错误NgFor仅支持绑定到Iterables，例如数组。 JSON数组有效
[英]ERROR NgFor only supports binding to Iterables such as Arrays. JSON array is valid
问题描述
I keep getting ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. 
我不断收到错误消息：无法找到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor only supports binding to Iterables such as Arrays. NgFor仅支持绑定到Iterables，例如数组。
*ngFor="let spec of vehicleSpecs"
I've tried everything I can think of, including searching here. 我已经尝试了所有我能想到的一切，包括在此处搜索。 It's a valid JSON array, so I really don't understand what's going on. 这是一个有效的JSON数组，所以我真的不明白发生了什么。
view-specs.ts 视图specs.ts
ngOnInit() {
// get locally saved user information
let user_id = window.localStorage.getItem('user_id');
// construct the url
let apiUrl = 'https://ridetrekker.com/api_v1/vehiclespecs/' + this.vehicle_id;
// add the X-API-KEY HTTP header as required by API
let key = window.localStorage.getItem('key');
let options = {
headers: new HttpHeaders({
'X-API-KEY': key
})
};
// do the ajax request
this.http.get(apiUrl, options)
.subscribe(result => {
console.log(result);
this.vehicleSpecs = result.data;
});
}
JSON data JSON数据
{
"status": true,
"message": null,
"data": {
"0": {
"model_detail_id": "1509824",
"type_title": null,
"unit_title": "Millimeters",
"unit_code": "MM",
"measurement_type_title": "Free Play",
"type_item_title": null,
"spec_title": "Clutch Cable",
"system_title": "Controls",
"value_a": 10,
"value_b": 20
},
"1": {
"model_detail_id": "1509827",
"type_title": null,
"unit_title": "Millimeters",
"unit_code": "MM",
"measurement_type_title": "Free Play",
"type_item_title": null,
"spec_title": "Throttle Cable",
"system_title": "Controls",
"value_a": 2,
"value_b": 6
},
"2": {
"model_detail_id": "1509830",
"type_title": null,
"unit_title": "RPM",
"unit_code": "R/Min",
"measurement_type_title": "RPM",
"type_item_title": null,
"spec_title": "Engine Idle Speed",
"system_title": "Engine - General",
"value_a": 830,
"value_b": 1030
},
"3": {
"model_detail_id": "1509851",
"type_title": "Engine Oil Grades",
"unit_title": null,
"unit_code": null,
"measurement_type_title": "Standard Grade",
"type_item_title": "GN4 10W-40",
"spec_title": "Engine Oil",
"system_title": "Engine - General",
"value_a": null,
"value_b": null
},
"4": {
"model_detail_id": "1509854",
"type_title": "Engine Oil Grades",
"unit_title": null,
"unit_code": null,
"measurement_type_title": "Premium Grade",
"type_item_title": "HP4S 10W-30 Synthetic Oil",
"spec_title": "Engine Oil",
"system_title": "Engine - General",
"value_a": null,
"value_b": null
},
"5": {
"model_detail_id": "1509707",
"type_title": null,
"unit_title": "Liters",
"unit_code": "L",
"measurement_type_title": "Level",
"type_item_title": null,
"spec_title": "Engine Oil",
"system_title": "Engine - General",
"value_a": 3.5,
"value_b": null
},
"6": {
"model_detail_id": "1509710",
"type_title": null,
"unit_title": "Liters",
"unit_code": "L",
"measurement_type_title": "Level With Filter",
"type_item_title": null,
"spec_title": "Engine Oil",
"system_title": "Engine - General",
"value_a": 3.7,
"value_b": null
},
"7": {
"model_detail_id": "1509716",
"type_title": null,
"unit_title": "Foot Pounds",
"unit_code": "FT LBS",
"measurement_type_title": "Torque",
"type_item_title": null,
"spec_title": "Engine Oil Drain Bolt",
"system_title": "Engine - General",
"value_a": 22,
"value_b": null
},
"8": {
"model_detail_id": "1509719",
"type_title": null,
"unit_title": "Foot Pounds",
"unit_code": "FT LBS",
"measurement_type_title": "Torque",
"type_item_title": null,
"spec_title": "Engine Oil Filter",
"system_title": "Engine - General",
"value_a": 19,
"value_b": null
},
"9": {
"model_detail_id": "1509866",
"type_title": "Spark Plug Type",
"unit_title": null,
"unit_code": null,
"measurement_type_title": "Type",
"type_item_title": "DCPR6E",
"spec_title": "Spark Plug",
"system_title": "Ignition",
"value_a": null,
"value_b": null
},
"10": {
"model_detail_id": "1509869",
"type_title": "Spark Plug Type",
"unit_title": null,
"unit_code": null,
"measurement_type_title": "Type",
"type_item_title": "DCPR7E",
"spec_title": "Spark Plug Alternate",
"system_title": "Ignition",
"value_a": null,
"value_b": null
}
}
} }
5 个解决方案
解决方案1
0 2018-08-21 04:57:03
As i see result.data is an object of objects , you need either an array or convert to array of objects. 如我所见， result.data是object的objects ，您需要一个数组或转换为对象的数组。
if you are using latest version of angular, you can simply use the keyvalue pipe. 如果您使用的是最新版本的angular，则只需使用键值管道即可。
<div *ngFor="let item of vehicleSpecs.data | keyvalue">
解决方案2
0 已采纳 2018-08-21 04:58:29
If you are using angular 6.1 Use keyvalue pipe 如果您使用的是Angular 6.1，请使用键值管道
*ngFor="let spec of vehicleSpecs.data | keyvalue"
For angular 2+ 对于角度2+
Try this 尝试这个
TS TS
get key(){
return Object.keys(this.results.data);
}
HTML HTML
<div *ngFor="let k of key">
<div>key: {{results.data[k].model_detail_id}}</div>
<div>key: {{results.data[k].unit_title}}</div>
</div>
Example: https://stackblitz.com/edit/angular-6-template-r9dmnv 示例： https ： //stackblitz.com/edit/angular-6-template-r9dmnv
解决方案3
0 2018-08-21 04:58:53
you can try: 你可以试试：
vehicleSpecs=[]
for(let item in result.data)
this.vehicleSpecs.push(item)
or use keyvalue pipe: 或使用键值管道：
<div *ngFor="let item of vehicleSpecs.data | keyvalue">
解决方案4
0 2018-08-21 04:58:57
If you are using Angular 6.1 it supports keyvalue pipe. 如果您使用的是Angular 6.1，则它支持键值管道。
<p>Maps & KeyValue Pipe</p>
<div *ngFor="let item of vehicleSpecs.data | keyvalue">
Key: <b>{{item.key}}</b> and Value: <b>{{item.value.model_detail_id}}</b>
</div>
解决方案5
0 2018-08-21 04:59:52
Json is not valid, 杰森无效，
If you want to iterate using ngFor then the type of data must be array 如果要使用ngFor进行迭代，则数据类型必须为array
valid json is like, 有效的json就像，
{
"status": true,
"message": null,
"data": [
"0": {
"model_detail_id": "1509824",
"type_title": null,
"unit_title": "Millimeters",
"unit_code": "MM",
"measurement_type_title": "Free Play",
"type_item_title": null,
"spec_title": "Clutch Cable",
"system_title": "Controls",
"value_a": 10,
"value_b": 20
},
"1": {
"model_detail_id": "1509827",
"type_title": null,
"unit_title": "Millimeters",
"unit_code": "MM",
"measurement_type_title": "Free Play",
"type_item_title": null,
"spec_title": "Throttle Cable",
"system_title": "Controls",
"value_a": 2,
"value_b": 6
},
"2": {
"model_detail_id": "1509830",
"type_title": null,
"unit_title": "RPM",
"unit_code": "R/Min",
"measurement_type_title": "RPM",
"type_item_title": null,
"spec_title": "Engine Idle Speed",
"system_title": "Engine - General",
"value_a": 830,
"value_b": 1030
},
"3": {
"model_detail_id": "1509851",
"type_title": "Engine Oil Grades",
"unit_title": null,
"unit_code": null,
"measurement_type_title": "Standard Grade",
"type_item_title": "GN4 10W-40",
"spec_title": "Engine Oil",
"system_title": "Engine - General",
"value_a": null,
"value_b": null
},
"4": {
"model_detail_id": "1509854",
"type_title": "Engine Oil Grades",
"unit_title": null,
"unit_code": null,
"measurement_type_title": "Premium Grade",
"type_item_title": "HP4S 10W-30 Synthetic Oil",
"spec_title": "Engine Oil",
"system_title": "Engine - General",
"value_a": null,
"value_b": null
},
"5": {
"model_detail_id": "1509707",
"type_title": null,
"unit_title": "Liters",
"unit_code": "L",
"measurement_type_title": "Level",
"type_item_title": null,
"spec_title": "Engine Oil",
"system_title": "Engine - General",
"value_a": 3.5,
"value_b": null
},
"6": {
"model_detail_id": "1509710",
"type_title": null,
"unit_title": "Liters",
"unit_code": "L",
"measurement_type_title": "Level With Filter",
"type_item_title": null,
"spec_title": "Engine Oil",
"system_title": "Engine - General",
"value_a": 3.7,
"value_b": null
},
"7": {
"model_detail_id": "1509716",
"type_title": null,
"unit_title": "Foot Pounds",
"unit_code": "FT LBS",
"measurement_type_title": "Torque",
"type_item_title": null,
"spec_title": "Engine Oil Drain Bolt",
"system_title": "Engine - General",
"value_a": 22,
"value_b": null
},
"8": {
"model_detail_id": "1509719",
"type_title": null,
"unit_title": "Foot Pounds",
"unit_code": "FT LBS",
"measurement_type_title": "Torque",
"type_item_title": null,
"spec_title": "Engine Oil Filter",
"system_title": "Engine - General",
"value_a": 19,
"value_b": null
},
"9": {
"model_detail_id": "1509866",
"type_title": "Spark Plug Type",
"unit_title": null,
"unit_code": null,
"measurement_type_title": "Type",
"type_item_title": "DCPR6E",
"spec_title": "Spark Plug",
"system_title": "Ignition",
"value_a": null,
"value_b": null
},
"10": {
"model_detail_id": "1509869",
"type_title": "Spark Plug Type",
"unit_title": null,
"unit_code": null,
"measurement_type_title": "Type",
"type_item_title": "DCPR7E",
"spec_title": "Spark Plug Alternate",
"system_title": "Ignition",
"value_a": null,
"value_b": null
}
]
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
错误：“对象”类型的“[对象对象]”。 NgFor 仅支持绑定到 Iterables，例如 Arrays。 - 离子项目 - Error: '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. - Ionic Project
Angular-选择时出错-NgFor仅支持绑定到数组等Iterable - Angular - Error on Select - NgFor only supports binding to Iterables such as Arrays
Angular“ NgFor仅支持绑定到可迭代对象，例如数组”错误 - Angular “NgFor only supports binding to Iterables such as Arrays” Error
Angular 9 应用“NgFor only support binding to Iterables such as Arrays”报错 - Angular 9 application “NgFor only supports binding to Iterables such as Arrays” error
如何消除此错误 NgFor 仅支持绑定到 Iterables，例如 Arrays - how to remove this error NgFor only supports binding to Iterables such as Arrays
angular 2 NgFor仅支持绑定到可迭代对象，例如数组 - angular 2 NgFor only supports binding to Iterables such as Arrays
找不到类型为“object”的不同支持对象“[object Object]”。 NgFor 仅支持绑定到可迭代对象，例如数组。 [Angular 8] - Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.[Angular 8]
找不到“object”类型的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables，例如 Arrays。 ? 怎么解决？ - Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. ? How solve it?
Angular2：NgFor仅支持绑定到可迭代对象，例如数组 - Angular2: NgFor only supports binding to Iterables such as Arrays
NgFor 只支持绑定 Ionic3 中的可迭代对象，例如数组 - NgFor only supports binding to Iterables such as Arrays in Ionic3
相关标签