Fehler beim Versuch, '[object Object]' zu differen- zieren.

Question

Könnte jemand leiten? Ich bekomme Fehler, kann nicht herausfinden warum? Sieht aus wie etwas falsch mit Fracht Variable in html

Fehler in app/freightList.component.html: 13: 8 Fehler zu diff '[object Object]' versucht

Im Folgenden finden Sie Code

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

Ihre extractData (und möglicherweise auch Ihre HTTP-API) gibt ein Objekt zurück. {} - ngFor benötigt ein Array [], um zu iterieren.

Ändern Sie Ihren Dienst/API, um ein Array zu erstellen, oder transformieren Sie das Objekt in Ihrer Komponente.

Answer 2

Ich stieß auf dieses Problem, als ich das WebApi änderte, das ich anrief, um Task<IActionResult> anstelle des vorhergehenden IEnumerable<object> zurückzugeben. Überprüfen Sie, ob die Antwort nicht in ein Objekt eingeschlossen ist. Ich musste meine extractData Methode ändern:

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

Answer 3

Der beste Weg ist es, das NgForm Objekt zu nehmen und ruft seine reset() Funktion.

Beispiel:

Html Datei

<form #exampleform='ngForm'> 

</form> 

ts

@ViewChild('exampleform') exampleform :NgForm; 

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

Datei