Error trying to diff '[object Object]' in Angular
<p>Looks like something wrong with freight variable in HTML: </p>

<blockquote>
  <p>Error in app/freightList.component.html:13:8 Error trying to diff
  '[object Object]'</p>
</blockquote>

<p>Below is code </p>

<pre><code>freight.service.ts
=======================

    getFreight (): Promise&lt;Freight[]&gt; {
        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 =&gt; this.freight = freight)
            .catch(error =&gt; this.error = error); // TODO: Display error message
    }

freightList.component.html
============================

       &lt;tr *ngFor="let frght of freight"&gt;
       &lt;td&gt;{{frght.grp}} - {{frght.grpname}}&lt;/td&gt;
       &lt;td&gt;{{frght.subgrp}} - {{frght.subgrpname}}&lt;/td&gt;
       &lt;td&gt;{{frght.prodno}} - {{frght.prodname}}&lt;/td&gt;
       &lt;td&gt;{{frght.percent}}&lt;/td&gt;
       &lt;td&gt;{{frght.effective_date}}&lt;/td&gt;
       &lt;td&gt;&lt;button (click)="deleteFreight(frght, $event)" class="btn btn-danger btn-sm"&gt;&lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt; Remove&lt;/button&gt;&lt;/td&gt;
       &lt;td&gt;&lt;button (click)="editFreight(frght)" class="btn btn-warning btn-sm"&gt;&lt;span class="glyphicon glyphicon-edit"&gt;&lt;/span&gt; Edit&lt;/button&gt;&lt;/td&gt;
       &lt;/tr&gt;

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"
    }]
</code></pre>