2016-07-06 94 views
39

任何人都可以引导?我收到错误,无法弄清楚为什么? 看起来像HTML有毛病货运可变尝试差异'[对象对象]'错误

错误在app/freightList.component.html:13: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" 
    }] 

回答

69

您的extractData(也可能是您的HTTP API)正在返回一个对象{} - ngFor需要一个数组[]来迭代。

更改您的服务/ API以生成数组或转换组件中的对象。

0

我遇到了这个问题时,我改变了WebApi我打电话来返回Task<IActionResult>,而不是以前的IEnumerable<object>。检查响应是否未包含在对象中。我不得不改变我的ExtractData由方法:

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

最好的办法是采取NgForm对象,并调用其reset()功能。

实施例:

HTML文件

<form #exampleform='ngForm'> 

</form> 

TS文件

@ViewChild('exampleform') exampleform :NgForm; 

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