Question

我的应用程序正在使用服务通过模拟api网址引入一些数据。我已经编写了服务，但出现错误：

找不到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor仅支持绑定到数组等Iterable。

我的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

您的代码正确，但是您犯了一个小错误。查看以下行。

    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 2

您应该尝试使用ngOnInit：

this.incidents = data.result;

分叉的demo。

Answer 3

将此添加到组件文件中

*ngFor="let incident of incidents.result"

并导入HttpModule

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

使用ngFor在Angular中显示来自api的剩余数据

3 个答案: