Angular中*ngFor遍历对象报错及数组转换后显示异常问题

问题根源 #

• *ngFor 仅支持遍历可迭代对象（数组、NgIterable 类型），单个 Inventory 对象不属于可迭代类型，因此会抛出类型不匹配的错误。
• 使用 Object.values(searchedInventory) 会把对象的每个属性值拆分为数组元素，导致每个值单独渲染成一行/列，出现垂直排列的问题。

解决方案 #

方案1：直接绑定单个对象属性（推荐，适配单个对象场景）

既然 searchedInventory 是单个对象，完全不需要用 *ngFor，直接在模板中绑定对象的属性即可：

<!-- 模板代码 -->
<div class="inventory-row">
  <span>{{ searchedInventory.id }}</span>
  <span>{{ searchedInventory.name }}</span>
  <span>{{ searchedInventory.quantity }}</span>
  <!-- 其他属性依次绑定 -->
</div>

方案2：将单个对象包装为数组（适配*ngFor遍历逻辑）

如果需要保留 *ngFor 的遍历逻辑（比如后续可能扩展为多个对象），把单个对象放进数组里，这样 *ngFor 会遍历这个长度为1的数组，渲染整行数据：

// 组件代码中处理数据
searchedInventoryArray = [this.searchedInventory];

<!-- 模板代码 -->
<div *ngFor="let inventory of searchedInventoryArray" class="inventory-row">
  <span>{{ inventory.id }}</span>
  <span>{{ inventory.name }}</span>
  <span>{{ inventory.quantity }}</span>
  <!-- 其他属性依次绑定 -->
</div>

为什么Object.values无法解决显示问题？ #

Object.values(searchedInventory) 返回的是类似 [123, "商品A", 50] 的纯值数组，*ngFor 会遍历每个元素，导致每个属性值单独占一行，自然呈现垂直排列。而包装成对象数组后，*ngFor 每次循环拿到的是完整的 Inventory 对象，你可以按行的结构统一渲染所有属性。

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