Question

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

服务

../api/articles?page=1&per_page=5&suppliers[]=1&suppliers[]=4

Patient-details.ts

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

这是HTML模板的一部分

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}

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编辑会话（而不是正在运行的代码）中，我们可以进行查看并提供进一步的帮助。

HTTP服务调用绑定到HTML元素

2 个答案: