각도 5 템플릿에서 템플릿 ERROR [object Object] NgFor는 배열 같은 반복문에 대한 바인딩 만 지원합니다.

Question

구성 요소에서 템플릿으로 데이터를 가져 와서 반복하려고합니다. 내가

export class arsCodes { 
    iD: number; 
    aRSCode: string; 
    aRSDescription: string; 
    class: string; 
    victimFlag: string; 
    startDate: string; 
    endDate: string; 
    createdByUserID: string; 
    createdOnDateTime: string; 
    modifiedByUserID: string; 
    modifiedOnDateTime: string; 
} 

를 사용하려면

모델 그럼 난이 오류가없이 사용 할 수 없습니다

arsCodes: arsCodes[]; 

그럼 내가 어떤

referrals: any; 

의 유형을 사용 로 전화 걸기 그것은 CONSOLE.LOG

Image Screenshot of data from console.log

하지만 난 얻을에서 통해 오는가 마지막으로 5,

this.arsSevice.getArsCodesApi(this.model) 
    .subscribe(
     result => { 
      //this.arsCode = result 
      this.referrals = result; 
      console.log('component',result); 
     }, 
     error => { 
      console.log(error); 
     } 
    ) 

component {Status: "success", Message: "", data: Array(16)}

내 템플릿 HTML 루프는

<tr *ngFor="let ars of referrals; let i = index"> 
    <td>{{i + 1}}</td> 
    <td>{{ars.arsCode}}</td> 
    <td>{{ars.description}}</td> 
    <td>{{ars.class}}</td> 
    <td>{{ars.startDate}}</td> 
    <td>{{ars.endDate}}</td> 
</tr> 

나는 데이터를 통해 올 것으로 예상 이 오류 :

당신은 arsCodes이와

export interface arsCodes { 
    iD: number; 
    ... 
} 

로, arsCodes: arsCodes[]; 일을해야 내 보내야합니다

An interface is a TypeScript artifact, it is not part of ECMAScript. An interface is a way to define a contract on a function with respect to the arguments and their type. Along with functions, an interface can also be used with a Class as well to define custom types.

: arsCodes가 인터페이스 (https://angular-2-training-book.rangle.io/handout/features/interfaces.html가)처럼 0

Answer 1

보인다. 서비스에서

, 당신은 단지 배열을 반환 map을 사용할 수

this.arsSevice.getArsCodesApi(this.model) 
    .map((res): arsCodes[] => res.data) 
    .subscribe((result: arsCodes[]) => { 
     this.arsCodes = result 
     console.log('component',result); 
     }, 
     error => { 
     console.log(error); 
     } 
    )