Error trying to diff '[object Object]' in Angular

问题

Looks like something wrong with freight variable in HTML:

Error in app/freightList.component.html:13:8 Error trying to diff \'[object Object]\'

Below is 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\"
    }]

回答1:

Your extractData (and possibly also your HTTP API) is returning an object {} - ngFor requires an array [] to iterate.

Change your service/API to produce an array, or transform the object in your component.

回答2:

I ran into this issue when I changed the WebApi I was calling to return a Task<IActionResult> instead of the previous IEnumerable<object>. Check the response isn't wrapped in an object. I had to change my extractData method to:

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

回答3:

The best way is to take the NgForm object and call its reset() function.

Example:

Html file

<form #exampleform='ngForm'>

</form>

ts file

@ViewChild('exampleform') exampleform :NgForm;

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

来源：https://stackoverflow.com/questions/38216857/error-trying-to-diff-object-object-in-angular