2016-07-06 18 views
39

Может ли кто-нибудь руководствоваться? Я получаю ошибку, не могу понять почему? Похоже, что-то неправильно с грузовым переменным в HTMLОшибка при попытке отличия '[object Object]'

Ошибки в приложении/freightList.component.html: 13: 8 Ошибки при дифф '[объект Object]'

Ниже код

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 
Смежные вопросы