Angular中API嵌套JSON映射后无法在HTML访问数据的问题

我折腾了一天左右，想把模拟API的响应数据做映射，自认为映射方式没问题，但在HTML里访问数据时就是拿不到内容。相关代码如下：

data.service.ts #

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { ConsentData, Prompt } from '@app/models/consent-data';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class ConsentWebviewDataService {
  constructor(private httpClient: HttpClient) {}

  getConsentData(): Observable<ConsentData<Prompt>> {
    return this.httpClient.get<ConsentData<Prompt>>(
      'MY_API_URL',
    );
  }
}

data.ts（接口定义） #

export interface ConsentData<Prompt> {
  prompts: Prompt[];
}

export interface Prompt {
  promptId: number;
  headline: string;
  body: string;
  imageUrl: string;
  consents: string[];
  type: string;
}

app.component.ts #

export class PromptComponent implements OnInit {
  consentData: any;

  constructor(private consentWebviewDataService: ConsentWebviewDataService) {}

  ngOnInit(): void {
    this.consentWebviewDataService.getConsentData().subscribe(data => {
      this.consentData = data.prompts.map(consents => {
        return {
          promptId: consents.promptId,
          headline: consents.headline,
          body: consents.body,
          imageUrl: consents.imageUrl,
          consents: consents.consents,
          type: consents.type,
        };
      });
    });
  }
}

API返回的JSON响应：

{"prompts":[{"promptId":100,"headline":"Headline","body":"Body text.","imageUrl":"https://picsum.photos/200","consents":["Consent 1","Consent 2","Consent 3"],"type":"ConsentCampaign"}]}

我原本的理解是：getConsentData()发送请求，组件订阅获取响应后做映射，再把结果赋值给consentData变量。但实际在HTML中尝试{{ consentData.promptId }}时，会抛出错误TypeError: ctx.consentData is undefined，换其他写法也无效，请问我到底遗漏了什么？

你遇到的问题主要有两个核心原因：

1. 异步请求的初始值问题 #

API请求是异步操作，组件初始化时consentData的初始值是undefined，模板会在请求返回前就开始渲染，此时访问consentData.promptId自然会报“undefined”错误。

2. 数据类型不匹配 #

data.prompts是一个数组，你通过map方法处理后，consentData依然是数组类型，而非单个对象。直接访问consentData.promptId相当于在数组上取对象属性，这本身就是错误的。

修正步骤： #

步骤1：给consentData设置初始值

在组件里把consentData初始化为空数组，避免初始状态的undefined：

export class PromptComponent implements OnInit {
  // 初始化为空数组，而非默认undefined
  consentData: Prompt[] = [];

  constructor(private consentWebviewDataService: ConsentWebviewDataService) {}

  ngOnInit(): void {
    this.consentWebviewDataService.getConsentData().subscribe(data => {
      // 其实这里的map是多余的，因为返回的prompts已经完全匹配Prompt结构
      this.consentData = data.prompts;
    });
  }
}

注：你当前的map操作完全没必要，因为API返回的prompts每个元素已经和Prompt接口结构一致，直接赋值即可。

步骤2：在模板中正确遍历数组

因为consentData是数组，需要用*ngFor遍历后访问单个元素的属性：

<!-- 遍历数组，逐个展示每个prompt的数据 -->
<div *ngFor="let prompt of consentData">
  <h2>{{ prompt.headline }}</h2>
  <p>{{ prompt.body }}</p>
  <img [src]="prompt.imageUrl" alt="Prompt image">
  <ul>
    <li *ngFor="let consent of prompt.consents">{{ consent }}</li>
  </ul>
</div>

可选：用安全导航操作符处理异步加载状态

如果需要处理单个对象的场景（比如API返回单个prompt），可以用?.安全导航操作符避免undefined错误：

<!-- 仅当consentData存在时才访问属性 -->
<div *ngIf="consentData.length > 0">
  {{ consentData[0].promptId }}
</div>
<!-- 或者用安全导航 -->
{{ consentData?.[0]?.promptId }}

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