Angular中*ngFor无法展示API返回数据仅显示ID如何修复

核心原因是TypeScript 接口仅在编译阶段做类型校验，不会在运行时自动做字段名映射，你前端定义的接口字段名和Web API实际返回的JSON字段名不匹配：

• 你定义的Anuncios接口中，三个业务字段使用大驼峰（PascalCase）命名：AnuncioTipo、AnuncioAssunto、AnuncioDescricao
• 后端API实际返回的JSON数据中，这三个字段为小驼峰（camelCase）格式，首字母小写：anuncioTipo、anuncioAssunto、anuncioDescricao
• 只有id字段的命名前后完全一致，因此可以正常渲染；其余字段因为模板访问的属性在实际返回的JS对象上不存在，值为undefined，页面就会显示空白。

两种方案二选一即可：

方案1：对齐后端返回的字段命名（推荐） #

直接修改前端接口定义和模板中的字段名，和后端返回格式保持一致，不需要额外写转换逻辑。
首先修改接口文件：

export interface Anuncios {
  id: number;
  anuncioTipo: string;
  anuncioAssunto: string;
  anuncioDescricao: string;
}

再修改组件模板中对应的属性访问代码：

<div class="container-fluid">
<h1>Todos os anuncios</h1>
<a href="#" routerLink="/anuncios/create" class="btn btn-sucess">Criar novo anuncio</a>
</div>

<div>
  <ng-container *ngFor="let anuncio of anuncios">
  <p>ID: {{ anuncio.id }}</p>
  <p>Tipo: {{ anuncio.anuncioTipo }}</p>
  <p>Assunto: {{ anuncio.anuncioAssunto }}</p>
  <p>Descrição: {{ anuncio.anuncioDescricao }}</p>
  </ng-container>
</div>

方案2：接收数据时手动做字段映射 #

如果要保留前端大驼峰的命名规范，可以在订阅API返回值时手动转换字段，不需要修改原有接口和模板：

ngOnInit(): void {
  this.anunciosService.getAll().subscribe((data: any[]) => {
    this.anuncios = data.map(item => ({
      id: item.id,
      AnuncioTipo: item.anuncioTipo,
      AnuncioAssunto: item.anuncioAssunto,
      AnuncioDescricao: item.anuncioDescricao
    }));
    console.log(this.anuncios);
  });
}

注意：TypeScript的类型断言不会做运行时的数据转换，不要以为给返回值标注了Anuncios[]类型，TS就会自动帮你对齐字段名，只要实际数据结构和定义不一致，就会出现模板读不到值的问题。

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