Angular组件从API获取的列表数据在HTML中无法渲染属性值问题

核心原因 #

你遇到的问题是Angular Http客户端的泛型仅为编译时类型提示，不会在运行时做字段转换，90%以上的概率是API返回的字段名与模板中引用的字段名大小写/拼写不匹配。

具体排查步骤 #

1. 验证字段名一致性
   在订阅回调中打印字段的实际值，确认后端返回的字段命名：

public getUsers(){
  this.service.getUsers().subscribe(data =>{
    this.users = data;
    console.log('模板引用的字段值：', data[0]?.Username, data[0]?.Id, data[0]?.Role);
    console.log('实际返回的所有字段：', Object.keys(data[0]));
  });
}

如果第一行打印为undefined，就说明模板中写的字段名和后端返回的不一致，通常是大小写差异：比如后端返回的是小写开头的username/id/role，你模板用了大写开头的Username/Id/Role。

2. 修复模板标签闭合问题
   你当前的HTML代码中，用户名所在的<th>标签没有闭合，可能导致渲染异常，修正为：

<th scope = "row">{{user.Username}}</th>

3. 临时调试验证
   可以在*ngFor的行内加JSON序列化输出，确认数据已经正确传递到模板层：

<tr *ngFor="let user of users">
  <td colspan="3">{{user | json}}</td>
</tr>

如果能输出完整的用户对象，就可以100%确定是字段名引用错误。

修复方案 #

方案1：直接对齐后端字段名 #

把模板中的属性名改成和后端返回的一致即可，比如后端返回小写开头就改成：

<tr *ngFor="let user of users">
  <th scope = "row">{{user.username}}</th>
  <td>{{user.id}}</td>
  <td>{{user.role}}</td>
</tr>

方案2：服务层做字段映射 #

如果要保持前端模型的命名规范，就在服务请求时做字段转换：

import { map } from 'rxjs';

public getUsers(): Observable<ShowUserModel[]> {
  return this.http.get<any[]>(this.baseUrl + `users`).pipe(
    map(rawList => rawList.map(item => ({
      Id: item.id,
      Username: item.username,
      Role: item.role
    })))
  );
}

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