Angular 尝试区分'时出错；[对象对象]'；棱角分明

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

freight.service.ts
=======================
get运费（）：承诺{
返回this.http.get（this.freightUrl）
.toPromise（）
.然后（此.extractData）
.接住（这个.把手错误）；
}
私有数据（res:Response）{
让body=res.json（）；
返回体| |{}；
}
freightList.component.ts
========================
获取运费（）{
这是货运服务
.get运费（）
.然后（运费=>this.freight=运费）
.catch（error=>this.error=error）；//TODO:显示错误消息
}
freightList.component.html
============================
{{frgt.grp}}-{frgt.grpname}
{{fRight.subgrp}}-{{fRight.subgrpname}
{{fRight.prodno}}-{{fRight.prodname}
{{frght.percent}
{{frght.生效日期}
去除
编辑
响应体
==================
[{
“生效日期”：“2016年1月1日”，
“grp”：“01”，
“grpname”：“止动器/挠性软管/盖板”，
“id”：“1”，
“百分比”：“10”，
“prodname”：“DWV PVC管100MM X 6MTR SN6 SWJ”，
“产品编号”：“1400200”，
“subgrp”：“02”，
“子GRPNAME”：“DWV管道-高达150MM”
}, {
“生效日期”：“2016年2月1日”，
“grp”：“01”，
“grpname”：“止动器/挠性软管/盖板”，
“id”：“2”，
“百分比”：“11”，
“prodname”：“PVC管100MM X 6MTR SWJ SN10”，
“产品编号”：“1400201”，
“subgrp”：“03”，
“子名称”：“DIMPLEX浴室配件”
}]

您的extractData（可能还有您的HTTP API）正在返回一个对象{}-ngFor需要一个数组[]进行迭代

---

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

当我更改调用的WebApi以返回

任务而不是以前的
IEnumerable
时，遇到了此问题。检查响应是否未包装在对象中。我必须将extractData方法更改为：

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

最好的方法是使用
NgForm
对象并调用其
reset（）
函数

例如：

Html文件

<form #exampleform='ngForm'>

</form>

（对我来说）问题在于我对newState的定义。以下是正确的定义：

const newState = (state, newData) => {
    return Object.assign([], state, newData);
}

我的newState正在将数组转换为对象，因为我使用了错误的括号-错误的方式如下

const newState = (state, newData) => {
    return Object.assign({}, state, newData);
}

祝你好运，我希望这会有帮助，
Rob
你在服务中是如何做到的？更改
返回body | |{}至
返回正文| |[]；否则它将取决于
freightUrl
httpget生成的内容。它应该会生成这些货运对象的数组。谢谢，我使用的是“数据作为节点[]”，如果没有通过，它可能会抛出一个异常。同意，只是说同一件事的不同方式。向上投票的答案描述了状态转换函数。此答案显示ngrx商店教程中的代码。道歉，如果它是redundent-我认为这就像拼写的行为和行为，只是最有意义的人寻求信息。
const newState = (state, newData) => {
    return Object.assign({}, state, newData);
}