Angular应用中数据库数据无法显示问题求助

我正在开发一个基于表单的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.component.ts #

patient: Patientendaten | undefined;
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();

?>

PHP接口返回的是包含单个对象的数组，但Angular组件期望接收的是单个Patientendaten对象。fetch_all(MYSQLI_ASSOC)方法会将查询结果转换成数组格式（即使只有一条记录），导致Angular中patient变量实际是数组，无法匹配模板中patient.titel这类属性访问，因此输入框无法渲染数据。

1. 修正PHP接口返回格式 #

将PHP中的fetch_all(MYSQLI_ASSOC)替换为fetch_assoc()，该方法只返回单条记录的关联数组，符合单个对象的结构：

// 替换原echo语句
echo json_encode($result->fetch_assoc());

2. 修复SQL注入风险（关键优化） #

原代码直接将URL中的ID拼入SQL语句，存在严重的SQL注入风险。改用预处理语句安全获取参数：

<?php
require 'connect_db.php';

// 从URL路径获取ID
$urlParts = parse_url($_SERVER['REQUEST_URI']);
$pathParts = explode('/', trim($urlParts['path'], '/'));
$id = end($pathParts);

// 使用预处理语句
$sql = "SELECT id, titel, anrede, vorname, name, strasse, hausnr, plz, ort, telefonnr, email 
        FROM personendaten
        WHERE id = ?";
$stmt = $con->prepare($sql);
$stmt->bind_param("i", $id); // "i"表示参数为整数类型
$stmt->execute();
$result = $stmt->get_result();

echo json_encode($result->fetch_assoc());

$stmt->close();
$con->close();
?>

3. 验证Angular接口定义 #

确保Patientendaten接口的属性与PHP返回的JSON字段完全一致（字段名大小写、拼写必须匹配），示例：

export interface Patientendaten {
  id: number;
  titel: string;
  anrede: string;
  vorname: string;
  name: string;
  // 其他对应字段...
}

4. 添加调试与错误处理（可选） #

在Angular组件的subscribe中添加错误回调，便于排查问题：

getPatient():void{ 
    const id = parseInt (this.route.snapshot.paramMap.get('id')!);
    this.formService.getPatientId(id).subscribe({
      next: (patient) => this.patient = patient,
      error: (err) => console.error('加载患者数据失败:', err)
    });
  }

内容的提问来源于stack exchange，提问作者doodlebug