如何在NgFor中正确展示赛马赛事名称、马匹名称及比赛名次？

这个问题的核心是SQL查询中的同名字段没有设置别名，当PDO以对象形式返回结果时，重复的键（比如id和nom）会被后面的字段覆盖，导致最终JSON里只保留了马匹的id和nom，赛事的对应信息丢失了。咱们一步步来修复：

1. 修改SQL查询，给重复字段添加别名 #

在SELECT语句里，给course和cheval的重复字段指定唯一别名，这样返回的结果就不会有键冲突了：

SELECT 
  course.id AS course_id, 
  course.nom AS course_nom, 
  cheval.id AS horse_id, 
  cheval.nom AS horse_nom, 
  resultatcourse.place, 
  resultatcourse.course, 
  resultatcourse.place 
FROM course, cheval, resultatcourse 
WHERE resultatcourse.course = course.id 
  AND resultatcourse.cheval = cheval.id

这里把赛事的ID和名称分别命名为course_id、course_nom，马匹的ID和名称命名为horse_id、horse_nom，彻底避免字段名重复。

2. 更新PHP代码使用新的查询语句 #

直接替换原来的SQL语句即可，PHP部分其他逻辑不需要改动：

try { 
  $stmt = $pdo->query('SELECT 
    course.id AS course_id, 
    course.nom AS course_nom, 
    cheval.id AS horse_id, 
    cheval.nom AS horse_nom, 
    resultatcourse.place, 
    resultatcourse.course, 
    resultatcourse.place 
  FROM course, cheval, resultatcourse 
  WHERE resultatcourse.course = course.id 
    AND resultatcourse.cheval = cheval.id'); 
  while($row = $stmt->fetch(PDO::FETCH_OBJ)) { 
    $data[] = $row; 
  } 
  echo json_encode($data); 
} catch(PDOException $e) { 
  echo $e->getMessage(); 
}

现在返回的JSON会包含course_nom（赛事名称）、horse_nom（马匹名称）和place（名次）这些不重复的字段。

3. 修改Angular HTML模板，使用别名后的字段 #

更新*ngFor里的绑定，用新的字段名来展示信息：

<ion-item *ngFor="let item of items;">
  <h2>{{ item.course_nom }} | {{ item.horse_nom }} | N°{{ item.place }}</h2>
</ion-item>

这样就能正确分别显示赛事名称、马匹名称和对应的名次了。

可选：给Angular定义类型接口（推荐） #

为了让代码更清晰，避免拼写错误，可以在TypeScript里定义一个接口来约束返回的数据结构：

interface RaceResult {
  course_id: number;
  course_nom: string;
  horse_id: number;
  horse_nom: string;
  place: number;
  course: number;
}

// 然后在load方法里指定类型
load(): void {
  this.http.get<RaceResult[]>('http://localhost/wequida/retrieve-resultatcourse.php').subscribe((data) => {
    console.dir(data);
    this.items = data;
  }, (error) => {
    console.dir(error);
  });
}

这样IDE会给你字段提示，也能提前发现字段名拼写错误。

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