Я продолжаю получать сообщение об ошибке: Не удается найти другой поддерживающий объект «[объект]] типа« объект ». NgFor поддерживает только привязку к итерациям, таким как массивы.
*ngFor="let spec of vehicleSpecs"
Я перепробовал все, что мог придумать, включая поиск здесь. Это действительный массив JSON, поэтому я действительно не понимаю, что происходит.
Вид - 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
{
"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 ответов
Если вы используете угловой 6.1 Используйте keyvalue pipe
*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>
Пример: https://stackblitz.com/edit/angular-6-template-r9dmnv а>
Если вы используете Angular 6.1, он поддерживает keyvalue pipe.
<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>
Json не действителен,
Если вы хотите выполнить итерацию, используя ngFor , тип данных должен быть массивом
Действительный 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
}
]
}
Как я вижу, result.data
является object
из objects
, вам нужен либо массив, либо конвертированный массиву объектов.
Если вы используете последнюю версию angular, вы можете просто использовать keyvalue pipe.
<div *ngFor="let item of vehicleSpecs.data | keyvalue">
Можешь попробовать:
vehicleSpecs=[]
for(let item in result.data)
this.vehicleSpecs.push(item)
Или используйте канал значения ключа:
<div *ngFor="let item of vehicleSpecs.data | keyvalue">
Похожие вопросы
Связанные вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.