Angular展示subData出现[object Object]及JSON转字符串问题

问题原因 #

1. TypeScript代码中的无效操作：JSON.stringify(this.sites = sites)这行代码无实际作用——你仅将响应赋值给this.sites后转成字符串，但未保存或使用该结果。且Angular的HttpClient已自动将JSON响应解析为JavaScript对象，无需额外调用JSON.stringify。
2. HTML直接展示对象数组：{{item.subData}}直接插值对象数组时，Angular会调用数组的toString()方法，因数组元素是对象，最终输出[object Object]。

解决方案 #

步骤1：修正TypeScript代码 #

删除无用的JSON.stringify调用，直接赋值解析后的响应数据：

export class AppComponent implements OnInit{
  sites: Site[] = [];
  constructor(private siteService:SiteService) { }

  ngOnInit(): void {
    this.GetSites();
  }

  GetSites() {
    this.siteService.GetSites()
    .subscribe((sites) => {
         this.sites = sites; // 直接赋值已解析的对象数组
      });
  }
}

步骤2：正确展示subData #

根据需求选择以下两种方式：

方式一：遍历子数据展示详情

若需展示subData中每个子站点的具体信息，使用*ngFor遍历数组：

<div *ngFor="let item of sites;">
  <div>Id: {{item.id}}</div>
  <div>Site Name: {{item.name}}</div>
  <div>Site Url: <a href="{{item.url}}">{{item.url}}</a></div>
  <!-- 遍历subData展示子站点 -->
  <div *ngIf="item.subData && item.subData.length > 0">
    <h4>子站点列表:</h4>
    <div *ngFor="let subItem of item.subData;">
      <div>子站点ID: {{subItem.id}}</div>
      <div>子站点名称: {{subItem.name}}</div>
      <div>子站点地址: <a href="{{subItem.url}}">{{subItem.url}}</a></div>
    </div>
  </div>
</div>

方式二：转为JSON字符串展示（调试用）

若仅需查看subData的结构，使用Angular内置的json管道将对象转为格式化字符串：

<div *ngFor="let item of sites;">
  <div>Id: {{item.id}}</div>
  <div>Site Name: {{item.name}}</div>
  <div>Site Url: <a href="{{item.url}}">{{item.url}}</a></div>
  <!-- 用json管道转为可读字符串 -->
  <div>子数据: {{item.subData | json}}</div>
</div>

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