Angular에서 '[object Object]'비교 시도 오류

Angular에서 '[object Object]'비교 시도 오류

---

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

---

extractData (및 아마도 HTTP API)가 {} 객체를 반환하고 있습니다. ngFor는 반복하려면 배열 []이 필요합니다.

서비스 / API를 변경하여 배열을 생성하거나 구성 요소의 개체를 변환합니다.

---

Task<IActionResult>이전 IEnumerable<object>. 대신 a를 반환하기 위해 호출 한 WebApi를 변경했을 때이 문제가 발생했습니다 . 응답이 개체에 래핑되지 않았는지 확인합니다. 내 extractData 메서드를 다음과 같이 변경해야했습니다.

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

---

가장 좋은 방법은 NgForm객체 를 가져와 그 reset()함수를 호출하는 것입니다.

예:

HTML 파일

<form #exampleform='ngForm'>

</form>

ts 파일

@ViewChild('exampleform') exampleform :NgForm;

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

ReferenceURL : https://stackoverflow.com/questions/38216857/error-trying-to-diff-object-object-in-angular