Angular中如何正确显示对象数据并执行*ngFor？解决[object Object]问题

先看你提供的代码：

Service 代码 #

public getLogs(){
 return this.http.get(`url.json`, {
  params: {
    supplier_id: id
  }
 })
}

HTML 代码 #

<div *ngFor="let item of items | keyvalue">
    {{ item }}
</div>

Component 代码 #

public items: any;

ngOnInit() {
 this.service.getLogs().subscribe(items => this.items = items);
}

你遇到的问题本质是没搞清楚接口返回的数据结构，以及Angular遍历的规则：

核心问题 #

1. *ngFor只能遍历数组，如果你接口返回的是对象，直接用*ngFor="let item of items"会报错；
2. 用keyvalue管道可以把对象转成键值对数组，但直接{{ item }}会输出整个键值对对象，所以显示[object Object]；
3. 初始items未赋值，页面渲染时可能因为undefined出现报错。

分情况解决 #

情况1：接口返回的是数组（比如[{id:1, content:'日志1'}, {id:2, content:'日志2'}]）

• 组件里给items加初始值，避免渲染时报错：

  public items: any[] = []; // 初始化为空数组
  

• HTML里直接遍历数组，显示对象的具体属性（替换成你实际的属性名）：

  <div *ngFor="let item of items">
    日志ID：{{ item.id }}，内容：{{ item.content }}
  </div>
  

情况2：接口返回的是对象（比如{log1: {time:'2024-05-20', content:'操作日志'}, log2: {...}}）

• 组件里给items加初始值：

  public items: any = {}; // 初始化为空对象
  

• HTML里用keyvalue后，要分别显示键和值（如果值还是对象，继续拆解属性）：

  <div *ngFor="let item of items | keyvalue">
    <p>日志标识：{{ item.key }}</p>
    <p>时间：{{ item.value.time }}，内容：{{ item.value.content }}</p>
    <!-- 临时查看完整数据可以用json管道 -->
    <!-- <p>完整数据：{{ item.value | json }}</p> -->
  </div>
  

关键排查步骤 #

先在订阅里打印接口返回的数据，确认真实结构：

this.service.getLogs().subscribe(items => {
  console.log('接口返回数据：', items); // 打开浏览器控制台看数据结构
  this.items = items;
});

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