0
241
ViewsLa respuesta JSON está en la matriz pero aún arroja un error "NgFor solo admite el enlace a iterables como matrices"
Archivo mecanografiado
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); }) }Matriz de respuesta
[ {"_id":"58f61a132d44240d085ca2fa","comapny_name":"Burslem Spice","__v":1,"categories":["58f643382d44240d085ca2fb"]},<br> {"_id":"590487964a45c56c0fa2911a","comapny_name":"Tiger Bite","categories":[]} ]archivo HTML
<div class="media"> <div class="media-left" > <li class="media" *ngFor = "let comp of data" > <label>{{comp}}</label> </li> </div> </div>La respuesta anterior todavía está en la matriz, pero aparece este error:
ERROR causado por: No se puede encontrar un objeto de soporte diferente '[objeto Objeto]' de tipo 'objeto'. NgFor solo admite el enlace a Iterables como Arrays.
·
Santiago Trujillo
1 answers
Answer question0
data : any; dice que los datos pueden ser cualquier cosa, pero *ngFor solo acepta Iterables. Cámbielo a array Debido a que está cargando asíncrono, cuando se procesa dom por primera vez, data no estarán definidos y, por lo tanto, angular se quejará.
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>
·
Santiago Trujillo
Report
Answer question