HTTP 获取服务返回空数组

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}`);

} }

患者详细信息.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(patient) 总是显示一个空数组。

<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 url 并将其粘贴到浏览器地址栏，看看是否收到json 响应。大多数情况下您都没有得到这个结果。

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

更新：

您的代码中存在一些问题：

1. data.service.ts 中的函数private extractData(res: Response) { ... } 没有得到Response 对象，它得到一个对象字面量数组。将其更改为any[]（如果您有一个类对象，请将any[] 更改为它，例如Patient[]）。 确保您的 http get 返回一个对象数组

2. 在patient-list.component.ts 中，将您的patient 变量更改为Observable<any[]>，并为其分配getPatientList 结果，如下所示：

   this.patient = this.data.getPatientList();
   

3. 将它与模板中的async 管道一起使用，如下所示：

   <li *ngFor= "let p of patient | async">
   

我已经用这些更改更新了分叉的StackBlitz project。