HTTP 服务调用绑定到 HTML 元素

Question

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

在服务中

getPatientList(): Observable<any> {
  return this.http.get<any[]>(endpoint).pipe(
  tap(data => console.log( JSON.stringify(data)))
 );
}

getPatientDetails(id: number): Observable<any> {
      return this.getPatientList().pipe(
      map((patient: any[]) => patient.find(p => p.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.data.getPatientDetails(this.pId).subscribe(
      patient => this.patient = patient);
    console.log(this.patient);
  }
}
console.log(patient) display following in console.


Observable {_isScalar: false, source: Observable, operator: MapOperator}

这是HTML模板的一部分

<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>

Answer 1

我认为前两种方法（服务）应该重构为：

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

还有：

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

Answer 2

欢迎来到堆栈溢出！

我看到的代码中的一个错误是您试图在检索值之前显示一个值。

这段代码：

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

应该是这样的：

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

日志记录需要在订阅中。

订阅告诉你的服务发送一个 Http 请求。提交该请求后，立即显示的值将始终未定义。

在稍后的某个时间点，返回数据并执行订阅中的代码。所以此时，您的patient 数据已设置好，您可以记录它了。

除此之外，我不确定您遇到了什么问题。

如果您可以将链接发布到您的 stackblitz 编辑会话（而不是运行代码），我们可以查看并提供进一步的帮助。