Angular如何通过HTTP请求获取JSON数据并解决展示及报错问题

• 订阅逻辑错误：你在ngOnInit中将subscribe返回的Subscription订阅实例直接赋值给了title变量，即便后续回调中会覆盖该值，初始渲染时也会导致内容异常，同时也不利于后续订阅销毁。
• 字段取值层级错误：你将接口返回的完整嵌套对象直接赋值给变量后插值渲染，对象转字符串默认输出[object Object]；且你需要的学科字段实际存储在返回值的data.subject数组中，未正确取对应层级就会无法获取目标内容。
• TypeScript类型不匹配：HttpClient.get默认返回Object类型，未定义返回值类型的情况下访问属性会触发类型校验报错，提示属性不存在于Object类型上。
• 接口地址不匹配：你代码中写的jsonplaceholder测试接口返回结构和你贴出的实际业务接口返回结构完全不同，若调用错误的接口地址也会导致取值失败。

步骤1：定义接口匹配返回值类型 #

在你的service文件或者公共类型文件中定义和接口返回结构一致的TS类型，解决类型报错：

interface SubjectItem {
  subject: string;
  numTitles: number;
  slug: string;
}

interface ApiResponse {
  status: string;
  results: number;
  data: {
    subject: SubjectItem[]
  }
}

步骤2：修改Service请求方法，指定泛型类型 #

给get方法传入定义好的ApiResponse泛型，明确返回值类型：

apiCall() {
  // 替换为你自己的业务接口地址，不要用jsonplaceholder的测试地址
  return this.httpClient.get<ApiResponse>('你的实际业务接口URL');
}

步骤3：修正组件订阅逻辑 #

不要将订阅实例赋值给业务变量，同时正确提取目标字段：

方案A：手动订阅（适合需要额外处理返回值的场景） #

组件ts代码：

import { Subject, takeUntil } from 'rxjs';

// 组件类内定义变量
subjectList: SubjectItem[] = [];
private destroy$ = new Subject<void>();

constructor(public dialog: MatDialog, private api:ServiceUserService) {};

ngOnInit() {
  this.api.apiCall()
    .pipe(takeUntil(this.destroy$)) // 组件销毁时自动取消订阅，避免内存泄漏
    .subscribe(res => {
      // 正确提取嵌套的学科数组
      this.subjectList = res.data.subject;
    })
}

ngOnDestroy() {
  // 销毁订阅
  this.destroy$.next();
  this.destroy$.complete();
}

方案B：异步管道（更简洁，自动管理订阅） #

组件ts代码：

import { map } from 'rxjs';

// 直接定义Observable变量
subjectList$ = this.api.apiCall().pipe(
  map(res => res.data.subject)
);

constructor(public dialog: MatDialog, private api:ServiceUserService) {};

步骤4：修改模板代码，循环渲染数组内容 #

因为返回的subject是数组，需要用*ngFor循环渲染每个项：

对应方案A的模板： #

<span class="subjectSpan" *ngFor="let item of subjectList">
  {{ item.subject }}
</span>

对应方案B的模板： #

<span class="subjectSpan" *ngFor="let item of subjectList$ | async">
  {{ item.subject }}
</span>

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