Angular：无法解析嵌套JSON，如何正确获取codeSubstance字段？

看起来你在Angular项目里解析后端返回的JSON时，遇到了codeSubstance字段无法正常显示的困扰，我来帮你一步步排查解决～

第一步：先确认数据结构是否匹配你的写法 #

首先要搞清楚，后端返回的JSON里compositions.substancesActives到底是单个对象还是数组？这是最常见的坑：

• 你可以先在组件类里打印数据确认结构：

  // 假设你是通过HTTP请求获取的数据
  this.yourService.getMedicaments().subscribe(data => {
    this.medicamentsDetailslist = data;
    console.log('数据结构:', this.medicamentsDetailslist); // 看控制台输出的结构
  });
  

• 或者直接在模板里临时输出结构：

  <tr *ngFor="let m of medicamentsDetailslist;">
    <td>{{ m.compositions.substancesActives | json }}</td>
  </tr>
  

第二步：针对不同结构的处理方案 #

情况1：substancesActives是单个对象

如果它确实是单个对象，那你原来的两种写法理论上都有效，但可能是空值报错或者拼写问题导致显示失败：

• 用安全导航操作符?.避免空值/未定义报错（比如数据还没加载完成时）：

  <tr *ngFor="let m of medicamentsDetailslist;">
    <td>{{ m.compositions?.substancesActives?.codeSubstance }}</td>
  </tr>
  

• 检查字段名拼写：比如后端返回的是不是code_substance或者codesubstance？大小写和下划线要完全匹配。

情况2：substancesActives是数组

如果它是一个数组（比如包含多个活性物质），那直接取.codeSubstance肯定拿不到，因为数组本身没有这个属性，需要遍历数组或者指定索引：

• 遍历数组显示所有物质的codeSubstance：

  <tr *ngFor="let m of medicamentsDetailslist;">
    <td *ngFor="let substance of m.compositions.substancesActives">
      {{ substance.codeSubstance }}
    </td>
  </tr>
  

• 只取数组第一个元素的codeSubstance：

  <tr *ngFor="let m of medicamentsDetailslist;">
    <td>{{ m.compositions.substancesActives[0]?.codeSubstance }}</td>
  </tr>
  

第三步：其他排查点 #

• 确认数据是否加载完成：如果是异步请求获取的数据，要确保medicamentsDetailslist已经被正确赋值，建议在模板外层加*ngIf确保数据存在后再渲染：

  <table *ngIf="medicamentsDetailslist">
    <tr *ngFor="let m of medicamentsDetailslist;">
      <td>{{ m.compositions?.substancesActives?.codeSubstance }}</td>
    </tr>
  </table>
  

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