Angular中*ngFor循环获取数组长度但无法显示对象属性值

问题诊断 #

核心原因是TypeScript的类型断言仅做编译时类型提示，不会自动映射后端返回字段与你定义的Person接口命名。虽然person.length能正常显示数组长度，console.log也能输出数据，但模板中{{ item.Id }}等表达式取不到值，大概率是后端返回的字段名（大小写、下划线规则）和你定义的Person接口不匹配。

比如后端实际返回的是id、first_name这类字段，而你在接口和模板里用的是Id、First_Name，这种情况下模板绑定会读取不到对应属性，自然显示为空。

解决方法 #

方法1：修改接口与模板，匹配后端实际字段名 #

先在浏览器控制台展开console.log(this.person)的输出，确认每个对象的真实字段名。例如如果后端返回结构是：

[{id: 1, first_name: "John", last_name: "Doe"}, ...]

就调整代码如下：

• 组件中的Person接口：

interface Person{
  id: number;
  first_name: string;
  last_name: string;
}

• 模板中的绑定代码：

<tr *ngFor="let item of person;">
  <td>{{ item.id }}</td>
  <td>{{ item.first_name }}</td>
  <td>{{ item.last_name }}</td>
</tr>

方法2：手动映射字段（不修改接口与模板） #

如果不想调整接口和模板的命名，在订阅数据时手动将后端字段映射到Person接口的字段：

ngOnInit(): void {
  this.http.get<any[]>('person').subscribe(result => {
    // 手动映射字段，替换成后端实际的字段名
    this.person = result.map(item => ({
      Id: item.id,
      First_Name: item.first_name,
      Last_Name: item.last_name
    }));
    console.log(this.person);
  }, error => console.error(error));
}

注意事项 #

Angular的HttpClient.get<T>()只是编译时的类型提示，不会对返回数据做任何字段转换。即便后端返回的字段和T定义不一致，TypeScript也不会报错，只会在运行时出现属性不存在的情况，导致模板绑定内容为空。

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