Angular中对象数组值无法通过插值显示，仅显示[Object Object]

你遇到的是Angular插值语法的常见问题：直接对对象数组使用{{ empData }}时，浏览器会调用数组的toString()方法，而数组里的每个对象转字符串默认就是[object Object]，所以页面会显示这个结果。

解决方法： #

1. 遍历数组展示具体属性（业务常用）

在模板中使用*ngFor循环数组，取出每个对象里的具体值：

<div *ngFor="let emp of empData">
  {{ emp.empData.value }}
</div>

这样就能正确显示每个员工的value值。

2. 调试时展示完整对象结构

如果需要查看整个数组的完整结构（用于调试），可以使用Angular自带的json管道：

{{ empData | json }}

它会把对象数组格式化为可读性强的JSON字符串，方便你确认数据结构。

你的代码说明 #

你的组件逻辑没问题，filter操作后empData确实是包含两个对象的数组，只是模板里的插值方式不对，改成上面的写法就能正常显示内容。

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