求助：如何在Angular HTML中展示含products的JSON数据

你的问题在于初始data被赋值为数组[]，但接口返回的是包含products数组的对象，数据加载完成前data.products会是undefined，导致*ngFor无法正常渲染。按以下步骤修复即可：

1. 修正组件中data的初始值 #

将data的初始值从数组改为空对象，匹配接口返回的数据类型：

export class AppComponent {
  title = 'Isham-ColdBanana';

  public data: any = {}; // 改为空对象
  constructor(private http: HttpClient) {}

  getData(){
    const url ='https://my-json-server.typicode.com/TomSearle/cb-devtest-api/db'
    this.http.get(url).subscribe((res)=>{
      this.data = res
      console.log(this.data)
    })
  }

  ngOnInit(){
    this.getData();
  }
}

2. 在HTML中添加空值保护 #

使用**可选链操作符（?.）**确保仅当data.products存在时执行*ngFor，避免空值报错：

<div *ngFor="let product of data?.products" style="text-align:center">
  <div> 
    {{ product.id }}
    {{ product.product_name }}
  </div>
</div>

或者用*ngIf先判断data是否存在，再渲染列表（更直观）：

<div *ngIf="data" style="text-align:center">
  <div *ngFor="let product of data.products">
    <div> 
      {{ product.id }}
      {{ product.product_name }}
    </div>
  </div>
</div>

修改完成后，当接口数据加载完毕，产品的ID和名称就能正常在页面上显示了。

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