Question

我有一个HTML页面，其中正在显示患者列表。（从服务调用到json服务器调用的列表）。当用户单击患者时，应显示页面的详细信息。

在服务中

getPatientList(): Observable<any> {
   return this.http.get<any[]>(`${endpoint}/patient-details`);
}

getPatientDetails(id: number): Observable<any> {
  return this.http.get<any[]>(`${endpoint}/patient-details? 
  profile_no=${id}`);

} }

Patient-details.ts

import { Component, OnInit, Input } from '@angular/core';
import { DataService } from '../services/data.service';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-patient-details',
  templateUrl: './patient-details.component.html',
  styleUrls: ['./patient-details.component.css']
})

export class PatientDetailsComponent implements OnInit {

  patient : any;
  pId: number;

  constructor(private data: DataService, private route: ActivatedRoute) { }
  ngOnInit() {

  this.route.params.subscribe(params => {
  this.pId=params.profile_no;
  });
   console.log(this.pId);

     this.data.getPatientDetails(this.pId).subscribe(
    patient => {
        console.log(patient);
       this.patient = patient;
       console.log(this.patient);
    });
}

console.log（患者）始终显示一个空数组。

<div class="form-group child">
      <h1>{{patient.first_name}} {{patient.last_name}}</h1>
    <div class="col form-group form-control-md mt-5">
      <label for="profileNo" style="width:25%">Profile No: </label>
      <label></label>
      <input type="text" class="input-group-sm" [(ngModel)]="patient.profile_no"> 
    </div>  
    <div class="col form-group form-control-md">
      <label for="DOB" style="width:25%">Date of Birth: </label> 
      <input type="text" class="input-group-sm" [(ngModel)]="patient.DOB">
    </div> 
    <div class="col form-group">
      <label for="gender" style="width:25%">Gender: </label>
      <input type="text" class="input-group-sm"[(ngModel)]="patient.gender"> 
    </div>
    <div class="col form-group">
      <label for="bloodGroup" style="width:25%">Blood Group: </label>
      <input type="text" class="input-group-sm" [(ngModel)]="patient.blood_group"> 
    </div>

这是https://stackblitz.com/edit/angular-lpatyh堆炸弹

Answer 1

您的问题出在您的数据服务getPatientList和getPatientDetails函数中。看来您没有正确获取数据。复制两个函数的get网址，然后将其粘贴到浏览器地址栏中，看看是否收到json响应。您很有可能没有得到这个结果。

我已经分叉了您的StackBlitz project，并修改了此函数以将可观察到的硬编码对象返回。进行此更改后，您会看到显示了患者详细信息表格。

更新：

您的代码中的几个问题：

private extractData(res: Response) { ... }中的函数data.service.ts没有获得Response对象，而是获得了对象常量的数组。将其更改为any[]（如果您有一个类对象，请将any[]更改为它，例如Patient[]）。 确保您的http get返回一个对象数组
在patient-list.component.ts中，将patient变量更改为Observable<any[]>，并为其分配getPatientList结果，如下所示：
```
this.patient = this.data.getPatientList();
```
将其与模板中的async管道一起使用，如下所示：
```
<li *ngFor= "let p of patient | async">
```

我已通过此更改更新了分叉的StackBlitz project。

HTTP get Service返回空数组

1 个答案: