如何在Angular中通过HttpClient获取API数据并在HTML中插值显示？

你的问题核心在于没有将请求数据绑定到组件可访问的属性，同时*ngFor语法存在错误，以下是具体修正方案：

问题原因梳理 #

1. 订阅回调中的data是局部变量，模板无法直接访问，必须赋值给组件的公共属性
2. *ngFor缺少of关键字，正确语法为*ngFor="let item of 数据集合"
3. 构造函数和ngOnInit重复发起请求，属于冗余操作

方案1：使用数组存储数据（手动管理订阅） #

通过定义组件公共属性存储数据，同时在组件销毁时取消订阅避免内存泄漏：

import { Component, OnInit, OnDestroy } from '@angular/core';
import {MatTabsModule} from '@angular/material/tabs';
import {MatListModule} from '@angular/material/list'; 
import { Observable, Subscription } from 'rxjs';
import {HttpClient, HttpHeaders} from '@angular/common/http';

export class TestComponent implements OnInit, OnDestroy {
  // 定义公共属性，供模板访问
  dataList: any[] = [];
  // 存储订阅实例，用于销毁时取消
  private dataSubscription!: Subscription;

  constructor(private http: HttpClient ) {}

  ngOnInit(){
    // 仅在ngOnInit中发起一次请求
    this.dataSubscription = this.http.get<any[]>('http://api.data_redacted_for_privacy').subscribe(data => {
      console.log(data);
      // 将请求结果赋值给组件属性
      this.dataList = data;
    });
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅，防止内存泄漏
    this.dataSubscription?.unsubscribe();
  }
}

修正后的模板：

<div *ngFor="let item of dataList">
  {{item.id}}
</div>

方案2：使用Observable + async管道（Angular推荐） #

这种方式无需手动管理订阅，async管道会自动处理订阅与取消，代码更简洁：

import { Component, OnInit } from '@angular/core';
import {MatTabsModule} from '@angular/material/tabs';
import {MatListModule} from '@angular/material/list'; 
import { Observable } from 'rxjs';
import {HttpClient, HttpHeaders} from '@angular/common/http';

export class TestComponent implements OnInit {
  // 定义公共Observable属性
  data$!: Observable<any[]>;

  constructor(private http: HttpClient ) {}

  ngOnInit(){
    // 将请求Observable直接赋值给组件属性
    this.data$ = this.http.get<any[]>('http://api.data_redacted_for_privacy');
    // 可选：订阅查看控制台数据
    this.data$.subscribe(data => console.log(data));
  }
}

模板中使用async管道：

<div *ngFor="let item of data$ | async">
  {{item.id}}
</div>

额外注意事项 #

• 确保API返回的是数组类型，如果返回单个对象，*ngFor无法遍历，需调整模板逻辑
• 若存在跨域问题，需后端配置CORS或前端使用Angular代理

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