数据库中的数据不会显示在 Angular 应用程序中

Question

嗨，我目前正在尝试构建一个基于 from 的 Angular 项目。表单数据保存到 MySQL 数据库，搜索功能应该检索显示在单独视图中的特定数据集，可以在其中更新或删除它。搜索提供了可能结果的列表作为链接，并选择应用程序应路由到显示数据集的视图中的特定链接。

这是我被困住的地方： 保存和搜索效果都很好。从搜索结果中选择链接时，应用程序会路由到正确的视图，但相应的输入字段为空。如果我使用浏览器的检查工具，我可以看到包含正确数据集的 XHR 已交付。

总的来说，我对编程还很陌生，而且我已经无能为力了。

以下是我认为可能相关的所有代码片段：

摘自detailview.html（表单较长，但缺失的元素以相同的方式构造）：

<div *ngIf="patient"> 

    <h2> Meine Daten:</h2>

    <div>
        <label for="patientendaten-titel">Titel: </label>
        <input id="patientendaten-titel" [(ngModel)]="patient.titel" placeholder="titel">
    </div>

    <div>
        <label for="patientendaten-anrede">Anrede: </label>
        <input id="patientendaten-anrede" [(ngModel)]="patient.anrede" placeholder="anrede">
    </div>

    <div>
        <label for="patientendaten-vorname">Vorname: </label>
        <input id="patientendaten-vorname" [(ngModel)]="patient.vorname" placeholder="vorname">
    </div>

    <div>
        <label for="patientendaten-name">Nachname </label>
        <input id="patientendaten-name" [(ngModel)]="patient.name" placeholder="name">
    </div>
</div>

detailview.ts：

getPatient():void{ 
    const id = parseInt (this.route.snapshot.paramMap.get('id')!);
    this.formService.getPatientId(id).subscribe(patient=> this.patient = patient);
  }

form.service.ts：

private formUrl2 = 'http://localhost/api/getId.php' 

public getPatientId (id: number): Observable<Patientendaten>{

    const url = `${this.formUrl2}/${id}`;
    return this.http.get<Patientendaten>(url);

  }

getId.php：

<?php

// returns data of patient selected by Id as JSON

require 'connect_db.php';

$url= $_SERVER['REQUEST_URI'];
$id= basename($url);

$sql = "SELECT id, titel, anrede, vorname, name, strasse, hausnr, plz, ort, telefonnr, email 
    FROM personendaten
    WHERE id = '$id'";
$result = mysqli_query($con, $sql);

echo json_encode ($result->fetch_all(MYSQLI_ASSOC));

$con->close();

?>

Answer 1

我不明白你是如何声明你的

patient

的。但代码看起来很僵硬。我会尝试的一件事是将 ```getPatient`` 修改为：

getPatient():void{ 
    const id = parseInt (this.route.snapshot.paramMap.get('id')!);
    this.formService.getPatientId(id).subscribe({
       next: patient=> { this.patient = patient; }
    });
  }

另一种方法是让你的病人变得可观察：

export class...
{
  patient$: Observable<Patientendaten> | undefined;
}

然后你的组件将有下一个外观：

<div *ngIf="patient$ | async"> 
  ...
</div>