JSON 响应在数组中，但仍抛出错误“NgFor 仅支持绑定到可迭代对象，例如数组" [英] JSON response is in array but still throws an error "NgFor only supports binding to Iterables such as Arrays"

问题描述

TypeScript 文件

导出类 CompanyComponent {apiService : APIService;数据:任何；private companyUrl = 'http://localhost:4000/api/company/';构造函数(apiService:APIService){this.apiService = apiService;this.getCompanies(this.companyUrl);}获取公司(网址:任何){this.data = this.apiService.GET(url).map((response :Response)=>response.json()).subscribe((response)=>{this.data = 响应；控制台日志(this.data)；})}

响应数组

<预><代码>[{"_id":"58f61a132d44240d085ca2fa","comapny_name":"Burslem香料","__v":1,"categories":["58f643382d44240d085ca2fb"]},<br>{"_id":"590487964a45c56c0fa2911a","comapny_name":"老虎咬","类别":[]}]

HTML 文件

<div class="media-left" ><li class="media" *ngFor = "let comp of data" ><label>{{comp}}</label>

上述响应仍在数组中，但出现此错误:

<块引用>

错误 由以下原因引起:找不到类型为object"的不同支持对象[object Object]".NgFor 只支持绑定到 Iterables比如数组.

解决方案

data : any; 说数据可以是任何东西，但 *ngFor 只接受 Iterables.将其更改为 array因为您正在加载异步，所以当第一次渲染 dom 时，data 将是未定义的，因此 angular 会抱怨.

 导出类 CompanyComponent {apiService : APIService;数据:数组；//或数组private companyUrl = 'http://localhost:4000/api/company/';构造函数(apiService:APIService){this.apiService = apiService;this.getCompanies(this.companyUrl);this.data = []}获取公司(网址:任何){this.apiService.GET(url).map((response :Response)=>response.json()).subscribe((response)=>{this.data = 响应；控制台日志(this.data)；})}

HTML

<div class="media-left" ><li class="media" *ngFor = "let comp of data" ><标签>{{comp.company_name}}</label>

TypeScript File

export class CompanyComponent  {
  apiService : APIService;
  data : any;
  private companyUrl = 'http://localhost:4000/api/company/';

  constructor(apiService : APIService) {
    this.apiService = apiService;
    this.getCompanies(this.companyUrl);
  }

  getCompanies(url: any){
    this.data = this.apiService.GET(url).map((response :Response)=>
    response.json()).subscribe((response)=>{
    this.data = response;
    console.log(this.data);
  })
}

Response array

[
   {"_id":"58f61a132d44240d085ca2fa","comapny_name":"Burslem 
  Spice","__v":1,"categories":["58f643382d44240d085ca2fb"]},<br>
  {"_id":"590487964a45c56c0fa2911a","comapny_name":"Tiger 
  Bite","categories":[]}
]

HTML file

<div class="media">
  <div class="media-left" >
    <li class="media" *ngFor = "let comp of data" >
      <label>{{comp}}</label>
    </li>   
  </div>  
</div>

The above response is still in array but I get this error:

ERROR caused by: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

解决方案

data : any; says data can be anything, but *ngFor accepts only Iterables. Change it to array Because you are loading async, when first time dom is rendered, data will be undefined and so angular will complain.

 export class CompanyComponent  {
      apiService : APIService;
      data : Array; // or array
      private companyUrl = 'http://localhost:4000/api/company/';

constructor(apiService : APIService) {
        this.apiService = apiService;
        this.getCompanies(this.companyUrl);
        this.data = []
}

getCompanies(url: any){
        this.apiService.GET(url).map((response :Response)=>
        response.json()).subscribe((response)=>{
            this.data = response;
            console.log(this.data);
        })
}

HTML

<div class="media">
  <div class="media-left" >
      <li class="media" *ngFor = "let comp of data" >
          <label> {{comp.company_name}}</label>
      </li>   
  </div>  
</div>

这篇关于JSON 响应在数组中，但仍抛出错误“NgFor 仅支持绑定到可迭代对象，例如数组"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！