'[オブジェクトオブジェクト]'を比較しようとしてエラーが発生しました

Question

誰でもガイドできますか？私は間違いをしています、なぜか理解できませんか？ 13：：diffをしようとして8 エラー '[オブジェクトのオブジェクト]' 以下

コード

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

ある は、HTMLでの貨物の変数に何か

アプリ/ freightList.component.htmlで

エラーのように見えます

Answer 1

あなたのextractData（HTTP APIも可能です）はオブジェクト{}を返すでしょう - ngForは反復するために配列[]を必要とします。

サービス/ APIを変更して配列を生成するか、コンポーネント内のオブジェクトを変換します。

Answer 2

私が前にIEnumerable<object>の代わりにTask<IActionResult>を返すように呼び出すWebApiを変更したとき、この問題が発生しました。応答がオブジェクトにラップされていないことを確認します。

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

Answer 3

最良の方法はNgFormオブジェクトを取得し、そのreset()機能を呼び出すことです：私は私にextractData方法を変更する必要がありました。

例：

HTMLファイル

<form #exampleform='ngForm'> 

</form> 

TS

@ViewChild('exampleform') exampleform :NgForm; 

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

ファイル