![](/img/trans.png)
[英]Error: '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. - Ionic Project
[英]ERROR NgFor only supports binding to Iterables such as Arrays. JSON array is valid
我不斷收到錯誤消息:無法找到類型為“對象”的其他支持對象“ [對象對象]”。 NgFor僅支持綁定到Iterables,例如數組。
*ngFor="let spec of vehicleSpecs"
我已經嘗試了所有我能想到的一切,包括在此處搜索。 這是一個有效的JSON數組,所以我真的不明白發生了什么。
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;
});
}
{
"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
}
}
}
如我所見, result.data
是object
的objects
,您需要一個數組或轉換為對象的數組。
如果您使用的是最新版本的angular,則只需使用鍵值管道即可。
<div *ngFor="let item of vehicleSpecs.data | keyvalue">
如果您使用的是Angular 6.1,請使用鍵值管道
*ngFor="let spec of vehicleSpecs.data | keyvalue"
對於角度2+
嘗試這個
TS
get key(){
return Object.keys(this.results.data);
}
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>
你可以試試:
vehicleSpecs=[]
for(let item in result.data)
this.vehicleSpecs.push(item)
或使用鍵值管道:
<div *ngFor="let item of vehicleSpecs.data | keyvalue">
如果您使用的是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>
傑森無效,
如果要使用ngFor進行迭代,則數據類型必須為array
有效的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.