Errore nel tentativo di diff '[oggetto oggetto]'

Question

Qualcuno potrebbe guidare? Sto ottenendo errore, non riesco a capire perché ?? Sembra che qualcosa di sbagliato con la variabile di merci in html

errore in app/freightList.component.html: 13: 8 errore cercando di diff '[object Object]'

Di seguito è riportato il codice

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

Il tuo extractData (e probabilmente anche la tua API HTTP) restituisce un oggetto {} - ngPer richiedere un array [] per iterare.

Modificare il servizio/API per produrre un array o trasformare l'oggetto nel componente.

Answer 2

Mi sono imbattuto in questo problema quando ho cambiato il WebApi che stavo chiamando per restituire un Task<IActionResult> invece del precedente IEnumerable<object>. Verifica che la risposta non sia racchiusa in un oggetto. Ho dovuto cambiare il mio metodo extractData a:

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

Answer 3

Il modo migliore è quello di prendere l'oggetto NgForm e chiamare la sua funzione reset().

esempio: file Html

<form #exampleform='ngForm'> 

</form> 

ts depositare

@ViewChild('exampleform') exampleform :NgForm; 

this.exampleform.reset(); // resets the form