尝试在 Angular 中区分“[object Object]”时出错答案

【问题标题】：Error trying to diff '[object Object]' in Angular尝试在 Angular 中区分“[object Object]”时出错
【发布时间】：2016-11-08 01:59: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"
    }]

【问题讨论】：

标签： angular ngfor

【解决方案1】：

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

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

【讨论】：

你如何在服务中做到这一点？
将return body || { };更改为return body || [];以获取空结果案例；否则它将取决于freightUrl http get 正在产生什么。它应该生成这些货运对象的数组。

【解决方案2】：

（对我而言）问题出在我的 newState 定义中。下面是正确的定义：

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

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

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

祝你好运，希望对你有帮助，抢

【讨论】：

同意，只是说同一件事的方式不同。赞成的答案描述了状态转换函数。这个答案显示了来自 ngrx 商店教程的代码。抱歉，如果它是多余的 - 我认为这就像行为和行为的拼写，只是对寻求信息的人最有意义的一个。

【解决方案3】：

我在更改我调用的 WebApi 以返回 Task<IActionResult> 而不是之前的 IEnumerable<object> 时遇到了这个问题。检查响应是否包含在对象中。我不得不将我的 extractData 方法更改为：

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

【讨论】：

谢谢，我使用的是“data as Node[]”，如果没有通过，它会抛出异常。

【解决方案4】：

最好的方法是获取NgForm 对象并调用它的reset() 函数。

例子：

HTML 文件

<form #exampleform='ngForm'>

</form>

ts 文件

@ViewChild('exampleform') exampleform :NgForm;

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

【讨论】：