Angular解析JSON报TypeError: Cannot read property 'description' of undefined

这个错误的核心原因很明确：你尝试访问description属性的那个Report实例根本没被正确初始化——因为你的JSON数据是嵌套结构（外层有个report字段），但你可能直接把整个响应对象当成了Report实例来用，或者没有正确提取嵌套的report数据。

下面是具体的解决步骤，分场景来说：

1. 从API获取数据时的正确处理（Angular HttpClient） #

如果你是通过HttpClient请求API拿到的JSON，一定要注意提取响应里嵌套的report字段，而不是直接把整个响应赋值给Report变量：

// report.component.ts
import { HttpClient } from '@angular/common/http';
import { Report } from './report.model';
import { Component } from '@angular/core';

@Component({ /* 组件元数据 */ })
export class ReportComponent {
  report: Report | undefined;

  constructor(private http: HttpClient) {}

  loadReport() {
    this.http.get<{ report: Report }>('你的API地址')
      .subscribe(apiResponse => {
        // 关键：提取apiResponse里的report属性，这才是符合Report类结构的数据
        this.report = apiResponse.report;
        // 现在可以安全访问this.report.description了
        console.log(this.report.description);
      });
  }
}

2. 手动解析JSON字符串的情况 #

如果是手动处理JSON字符串，同样要先解析出外层的report对象，再传入Report构造函数：

const rawJson = `{ "report": { "description": "Average of the quantity of items per person (total and just non-infected)", "average_items_quantity_per_person": 164.7473903966597, "average_items_quantity_per_healthy_person": 172.29787234042553 } }`;

// 先解析整个JSON
const parsedData = JSON.parse(rawJson);
// 提取嵌套的report数据，再创建Report实例
const myReport = new Report(
  parsedData.report.description,
  parsedData.report.average_items_quantity_per_person,
  parsedData.report.average_items_quantity_per_healthy_person
);

3. 优化：给Report类添加静态工厂方法 #

为了避免重复的提取逻辑，可以在report.model.ts里加一个静态方法，直接从API响应创建Report实例：

// report.model.ts
export class Report{
  constructor(
    public description: string,
    public average_items_quantity_per_person: number,
    public average_items_quantity_per_healthy_person: number
  ){}

  // 静态方法：从包含report字段的API响应中创建实例
  static fromApiResponse(response: { report: Report }): Report {
    const data = response.report;
    return new Report(data.description, data.average_items_quantity_per_person, data.average_items_quantity_per_healthy_person);
  }
}

之后在组件里就能更简洁地使用：

this.http.get<{ report: Report }>('你的API地址')
  .subscribe(res => {
    this.report = Report.fromApiResponse(res);
  });

4. 模板中的安全防护 #

如果你的report数据是异步加载的，在模板中直接访问属性时，要使用**安全导航操作符?.**或者*ngIf来避免组件初始化时因为report还未赋值而报错：

<!-- 方式1：用*ngIf确保report存在后再渲染 -->
<div *ngIf="report">
  <h3>{{ report.description }}</h3>
  <p>人均物品数量：{{ report.average_items_quantity_per_person }}</p>
  <p>健康人均物品数量：{{ report.average_items_quantity_per_healthy_person }}</p>
</div>

<!-- 方式2：用安全导航符直接访问 -->
<p>{{ report?.description }}</p>

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