Json 无法使用ngFor显示数据

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

我的服务班

患者服务等级。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>

@Injectable（）
导出类PatientService{
url=”http://localhost:8080/rest/patientC";
构造函数（私有http:http）{}
getPatientWithObservale（）：可观察{
返回this.http.get（this.url）
.map（此.extractdata）
.catch（此.手柄不可维修）；
}
私有数据（res:Response）{
让body=res.json（）；
console.log（body.data）；
返回body.data |{}；
}
}
**可观测组件类.ts**
导出类ObservableComponent实现OnInit{
病人:病人[];；
错误消息：字符串；
患者名称：字符串；
病人=新病人（）；
构造函数（私有patientService:patientService）{}
恩戈尼尼特（）{
这个病人（）；
}
fetchPatient（）：void{
this.patientService.getPatientWithObservale（）
.订阅（患者=>this.patients=患者，
error=>this.errorMessage=error）；
}
}
**可观察组件.html**
可观察的患者详细信息
身份证件
名字
姓
年龄
性别
地址
疾病
联系电话
{{paty.id}
{{paty.firstname}
{{paty.lastname}
{{paty.gender}
{{paty.age}
{{paty.address}
{{paty.contactNo}
{{paty.disease}

错误：

ObservableComponent.html:13错误：找不到类型为“object”的不同支持对象“[object object]”。NgFor只支持绑定到数组之类的可重用文件

---

ngFor似乎无法绑定值。如何解决此问题？

因为错误说明ngFor指令仅适用于iterables

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

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

private-extractdata（res:Response）{
让body=res.json（）；
console.log（body.data）；
返回body.data | |{}；只是“patients”没有ngfor所期望的数组格式。检查http响应格式我尝试了，但它不起作用，但我找到了解决方案。我没有返回“body.data |{}”，而是将其更改为“body | |{}”。我不知道为什么前者不起作用，但后者起作用。有人解释一下吗？
private extractdata(res:Response){
        let body=res.json();
        console.log(body.data);
        return body.data || []; <-- change
    }
}