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

ngfor index angular 5

Question

¿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"
}]

Answer 1

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

Answer 2

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 || { };
}

Answer 3

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.