Я продолжаю получать сообщение об ошибке: Не удается найти другой поддерживающий объект «[объект]] типа« объект ». 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
    }
}

}

0
paigejulianne14 21 Авг 2018 в 07:55

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

0
Chellappan வ 21 Авг 2018 в 05:06

Если вы используете 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>
0
Suresh Kumar Ariya 21 Авг 2018 в 04:58

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
     }
  ]
    }
0
Aniket Avhad 21 Авг 2018 в 04:59

Как я вижу, result.data является object из objects , вам нужен либо массив, либо конвертированный массиву объектов.

Если вы используете последнюю версию angular, вы можете просто использовать keyvalue pipe.

<div *ngFor="let item of vehicleSpecs.data | keyvalue">
0
Sajeetharan 21 Авг 2018 в 05:00

Можешь попробовать:

vehicleSpecs=[]

for(let item in result.data)
  this.vehicleSpecs.push(item)

Или используйте канал значения ключа:

<div *ngFor="let item of vehicleSpecs.data | keyvalue">
0
Fateme Fazli 21 Авг 2018 в 04:58
51941781