ngFor로 데이터를 표시 할 수 없습니다

Question

각도의 get 메소드를 사용하여 json 데이터가 포함 된 URL에서 환자의 세부 정보를 가져 오려고합니다.

내 서비스 클래스

환자 서비스 class.ts

@Injectable() 
export class PatientService{ 
    url="http://localhost:8080/rest/patientC"; 

    constructor(private http:Http){} 

    getPatientWithObservale():Observable<patient[]>{ 
     return this.http.get(this.url) 
         .map(this.extractdata) 
         .catch(this.handleErrorObservable); 
    } 
private extractdata(res:Response){ 
     let body=res.json(); 
     console.log(body.data); 
     return body.data || {}; 
    } 
} 

**Observable Component class.ts** 

export class ObservableComponent implements OnInit{ 
    patients:patient[]; 
    errorMessage: string; 
    patientName: string; 
    patient=new patient(); 

    constructor(private patientService: PatientService){} 
    ngOnInit(){ 
     this.fetchPatient(); 
    } 

    fetchPatient():void{ 
     this.patientService.getPatientWithObservale() 
          .subscribe(patients=>this.patients = patients, 
          error=>this.errorMessage=error); 

    } 
} 

**Observable component.html** 

<h3>Patient Details with Observable </h3> 
<table> 
    <tr> 
     <th>Id</th> 
     <th>First Name</th> 
     <th>Last Name</th> 
     <th>Age</th> 
     <th>Gender</th> 
     <th>Address</th> 
     <th>Disease</th> 
     <th>Contact No</th> 
    </tr> 
    <tr *ngFor="let paty of patients"> 
     <td>{{paty.id}}</td> 
     <td>{{paty.firstname}}</td> 
     <td>{{paty.lastname}}</td> 
     <td>{{paty.gender}}</td> 
     <td>{{paty.age}}</td> 
     <td>{{paty.address}}</td> 
     <td>{{paty.contactNo}}</td> 
     <td>{{paty.disease}}</td> 
    </tr> 
</table> 

오류 :

ObservableComponent.html:13 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

이 ngFor 값을 결합 할 수없는 것 같다. 이 문제를 어떻게 해결할 수 있습니까?

Answer 1

오류 상태 ngFor 지시문은 iterables에서만 작동합니다.

귀하의 extractdata 방법은 그것은 단지 '환자'배열 형식이 ngfor 기대하지 않는 것

private extractdata(res:Response){ 
     let body=res.json(); 
     console.log(body.data); 
     return body.data || []; <-- change 
    } 
}