Angular模板中如何渲染JSON数据，避免显示[object object]

你的代码存在两个核心问题，导致页面显示[object object]，以下是修正方案：

1. 修正组件逻辑（cards.component.ts） #

不要在模板中直接调用getData()，因为这个方法返回的是**订阅对象（Subscription）**而非接口返回的数据；同时JSON类型不适合存储接口响应数据，建议改用any或自定义类型：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-cards',
  templateUrl: './cards.component.html',
  styleUrls: ['./cards.component.css']
})
export class CardsComponent implements OnInit {
  // 改用any类型，或根据接口结构定义自定义接口
  serverData: any;

  constructor(private httpClient: HttpClient) { }

  ngOnInit(): void {
    // 在组件初始化时调用数据请求，避免模板重复触发请求
    this.getData();
  }

  getData() {
    this.httpClient.get('http://localhost:5000/details')
      .subscribe(data => {
        this.serverData = data;
        console.log(this.serverData);
      });
  }
}

2. 修正模板代码（cards.component.html） #

直接绑定已获取到的serverData，并使用json管道格式化显示；同时添加空值判断，避免数据未加载时显示异常：

<div *ngIf="serverData">
  {{ serverData | json }}
</div>
<!-- 可选：数据未加载时的提示 -->
<div *ngIf="!serverData">
  加载中...
</div>

问题原因说明 #

• 你之前在模板中调用getData()，这个方法返回的是HttpClient.get()的订阅对象（Subscription），而非接口返回的JSON数据，所以json管道处理这个对象时会显示[object object]。
• 组件初始化时通过ngOnInit调用请求，能确保数据只请求一次，同时将数据赋值给serverData，模板直接绑定该变量即可拿到真实数据。

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