Отображение остальных данных из API в Angular с использованием ngFor

Question

Мое приложение использует сервис для ввода некоторых данных из фиктивного URL-адреса.Я написал сервис, но получаю сообщение об ошибке:

Не удается найти другой поддерживающий объект «[объект]] типа« объект ».NgFor поддерживает только привязку к Iterables, таким как массивы.

Моя структура JSON выглядит следующим образом:

[
    "result", [
  {
    "u_serial_number": "E745K100200",
    "u_product_name": "MP2355 Black and White",
    "u_address_floor": "1",
    "u_address_line_1": "15 Rue De Cambrai",
    "u_address_post_code": "75019"
  },
  {
    "u_serial_number": "E745K100200",
    "u_product_name": "MP26789 All Colour",
    "u_address_floor": "2",
    "u_address_line_1": "14 London Road",
    "u_address_post_code": "78900"
  },
  {
    "u_serial_number": "E745K100200",
    "u_product_name": "MP2678 Black and Yellow",
    "u_address_floor": "3",
    "u_address_line_1": "13 Champs Elyses",
    "u_address_post_code": "78987"
  },
  {
    "u_serial_number": "E745K100200",
    "u_product_name": "MP7898 Black and white",
    "u_address_floor": "4",
    "u_address_line_1": "17 Rue De Cambrai",
    "u_address_post_code": "75019"
  },
  {
    "u_serial_number": "E745K100200",
    "u_product_name": "MP2355 Black and white",
    "u_address_floor": "5",
    "u_address_line_1": "11 Rue De Cambrai",
    "u_address_post_code": "75019"
  },
  {
    "u_serial_number": "E745K100200",
    "u_product_name": "MP2355 Black and white",
    "u_address_floor": "6",
    "u_address_line_1": "11 Rue De Cambrai",
    "u_address_post_code": "75019"
  },
  {
    "u_serial_number": "E745K100200",
    "u_product_name": "MP2355 Black and white",
    "u_address_floor": "7",
    "u_address_line_1": "11 Rue De Cambrai",
    "u_address_post_code": "75019"
  }
 ]
]

Я создал пример для stackblitz: https://stackblitz.com/edit/angular-azjsa6

Answer 1

Добавьте это в файл компонента

*ngFor="let incident of incidents.result"

и импортируйте HttpModule

import {HttpClientModule} from '@angular/common/http';

Answer 2

ваш код правильный, но вы допустили небольшую ошибку.Проверьте следующую строку.

    ngOnInit() {
            this.service.getAll().subscribe((data) => {
              this.loading = true;
              this.incidents = data['result']; // <---- this line.
              this.loading = false;
              console.log('Result - ', data);
              console.log('data is recieved');
            })
          }
        }

И не забудьте импортировать HttpClient (если вы используете) ..

Импорт HttpModule :

     import {HttpClientModule} from '@angular/common/http';

:)

Answer 3

вы должны попробовать в вашем ngOnInit:

this.incidents = data.result;

раздвоенный демо .