Angular项目表格渲染属性值为undefined 数据无法正常展示问题

问题根因 #

1. 最核心原因是后端接口返回的JSON字段名与你定义的Equipments接口字段名不匹配：Angular HttpClient的泛型仅为编译阶段的类型提示，不会在运行时自动做字段转换/映射，只要字段名大小写、拼写有差异，读取属性就会返回undefined。
2. 模板中删除按钮的事件绑定写错：ngFor循环内的equip是局部变量，不需要加this前缀，加this会尝试读取组件实例上的equip属性，自然读取不到。

解决步骤 #

步骤1：确认后端返回字段命名 #

先在组件的订阅回调中打印接口返回结果，确认每个字段的实际拼写与大小写：

this.EquipmentService.Getall().subscribe(result => {
  console.log('接口返回数据：', result); // 打开控制台查看每个对象的键名
  this.equipments = result;
});

步骤2：匹配字段命名（二选一即可） #

方案A：修改接口与模板适配后端命名

如果后端返回的是驼峰命名（比如name、serialNumber），就修改Equipments接口定义：

export interface Equipments{
  equipmentsID: number;
  name: string;
  serialNumber: string;
  voltage: string;
  electricCurrent: string;
  oil: string;
  date: Date;
}

同步修改模板中的属性绑定，比如把{{equip.Name}}改为{{equip.name}}，所有字段对应修改即可。

方案B：服务层做字段映射适配现有定义

如果不想修改现有接口和模板，可以在服务的查询方法中新增一层字段转换：

// 先导入rxjs的map操作符
import { map } from 'rxjs';

Getall(): Observable<Equipments[]>{
  return this.http.get<any[]>(this.url).pipe(
    map(items => items.map(item => ({
      EquipmentsID: item.equipmentsID ?? item.EquipmentsID,
      Name: item.name ?? item.Name,
      SerialNumber: item.serialNumber ?? item.SerialNumber,
      Voltage: item.voltage ?? item.Voltage,
      ElectricCurrent: item.electricCurrent ?? item.ElectricCurrent,
      Oil: item.oil ?? item.Oil,
      Date: item.date ?? item.Date
    })))
  );
}

步骤3：修正删除按钮绑定 #

把模板中删除按钮的点击事件去掉this前缀：

<button mat-raised-button color="warn" (click)="Clickstring(equip.Name)">Delete</button>

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