无法使用ngFor显示数据

I am trying to fetch details of patient from a url containing json data using get method of angular.

我试图使用角度的get方法从包含json数据的url中获取患者的详细信息。

My service class

我的服务类

Patient Service class.ts

患者服务类.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>

Error:

错误：

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.

ObservableComponent.html：13 ERROR错误：无法找到'object'类型的不同支持对象'[object Object]'。 NgFor仅支持绑定到诸如Arrays之类的Iterables。

It seems ngFor is unable to bind values. How can I solve this issue?

似乎ngFor无法绑定值。我该如何解决这个问题？

1 个解决方案

#1

As the error states ngFor directive only works with iterables.

由于错误状态，ngFor指令仅适用于iterables。

Your extractdata method might be returning an object

您的extractdata方法可能正在返回一个对象

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

Change the return value to be array

将返回值更改为数组

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

#1