number index example angular ngfor

angular - index - Error al intentar diferir ''[objeto Objeto]''



ngfor index angular 5 (3)

¿Alguien podría guiar? Recibo un error, ¿no puedo entender por qué? Parece que algo anda mal con la variable de carga en html

Error en app / freightList.component.html: 13: 8 Error al intentar diferir ''[objeto Object]''

Debajo está el código

freight.service.ts ======================= getFreight (): Promise<Freight[]> { return this.http.get(this.freightUrl) .toPromise() .then(this.extractData) .catch(this.handleError); } private extractData(res: Response) { let body = res.json(); return body || { }; } freightList.component.ts ======================== getFreight() { this.freightService .getFreight() .then(freight => this.freight = freight) .catch(error => this.error = error); // TODO: Display error message } freightList.component.html ============================ <tr *ngFor="let frght of freight"> <td>{{frght.grp}} - {{frght.grpname}}</td> <td>{{frght.subgrp}} - {{frght.subgrpname}}</td> <td>{{frght.prodno}} - {{frght.prodname}}</td> <td>{{frght.percent}}</td> <td>{{frght.effective_date}}</td> <td><button (click)="deleteFreight(frght, $event)" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-remove"></span> Remove</button></td> <td><button (click)="editFreight(frght)" class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-edit"></span> Edit</button></td> </tr> Response body ================== [{ "effective_date": "01/01/2016", "grp": "01", "grpname": "STOPS/FLEX HOSES/COVER PLATES", "id": "1", "percent": "10", "prodname": "DWV PVC PIPE 100MM X 6MTR SN6 SWJ", "prodno": "1400200", "subgrp": "02", "subgrpname": "DWV PIPE - UP TO 150MM" }, { "effective_date": "01/02/2016", "grp": "01", "grpname": "STOPS/FLEX HOSES/COVER PLATES", "id": "2", "percent": "11", "prodname": "PVC PIPE 100MM X 6MTR SWJ SN10", "prodno": "1400201", "subgrp": "03", "subgrpname": "DIMPLEX BATHROOM ACCESSORIES" }]


La mejor manera es tomar el objeto NgForm y llamar a su función reset() .

Ejemplo:

Archivo html

<form #exampleform=''ngForm''> </form>

archivo ts

@ViewChild(''exampleform'') exampleform :NgForm; this.exampleform.reset(); // resets the form


Me encontré con este problema cuando cambié el WebApi al que estaba llamando para devolver una Task<IActionResult> lugar del IEnumerable<object> . Verifique que la respuesta no esté envuelta en un objeto. Tuve que cambiar mi método extractData a:

private extractData(res: Response) { let body = res.json(); return body.result || body || { }; }


Su extractData (y posiblemente también su API HTTP) está devolviendo un objeto {} - ngFor requiere una matriz [] para iterar.

Cambie su servicio / API para producir una matriz o transforme el objeto en su componente.