有人可以指导吗?我收到错误,无法弄清楚为什么? html
中的货运变量看起来有问题app / freightList.component.html:13:8出错 尝试区分' [object 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"
}]
答案 0 :(得分:96)
你的extractData(也可能是你的HTTP API)正在返回一个对象{} - ngFor需要一个array []来迭代。
更改服务/ API以生成数组,或转换组件中的对象。
答案 1 :(得分:1)
当我更改WebApi时,我遇到了这个问题,我正在呼叫返回Task<IActionResult>
而不是之前的IEnumerable<object>
。检查响应是否未包含在对象中。我不得不将extractData方法更改为:
private extractData(res: Response) {
let body = res.json();
return body.result || body || { };
}
答案 2 :(得分:0)
(对我而言)问题出在我的newState定义中。下面是正确的定义:
const newState = (state, newData) => {
return Object.assign([], state, newData);
}
我的newState正在将数组转换为对象,因为我使用了错误的括号-错误的方式在下面。
const newState = (state, newData) => {
return Object.assign({}, state, newData);
}
祝您好运,希望对您有所帮助, 罗布
答案 3 :(得分:-2)
最好的方法是使用NgForm
对象并调用其reset()
函数。
示例:
Html文件
<form #exampleform='ngForm'>
</form>
ts文件
@ViewChild('exampleform') exampleform :NgForm;
this.exampleform.reset(); // resets the form