Angular收银系统中如何将Modifier对象转为数组适配*ngFor

问题背景 #

我正在用Angular开发收银系统（POS），数据来自RESTful API。用户点击商品名称按钮时，弹窗会展示对应的配料选项；选中配料后，该对象会存入商品对象中。但用*ngFor渲染购物车商品时报错，因为*ngFor只支持数组，不支持直接遍历对象。

当前数据结构 #

{
  0: {modifierId: 4, modifierName: 'Garlic', modifierPrice: 60},
  1: {modifierId: 1, modifierName: 'Tartar ', modifierPrice: 60},
  2: {modifierId: 3, modifierName: 'Herb ', modifierPrice: 60},
  itemId: 387,
  itemName: "BUFFALO WINGS",
  itemPrice: 500,
  itemQuantity: 0
}

期望处理目标 #

将对象中数字键对应的配料提取为数组，适配*ngFor的遍历要求（注：不推荐把商品属性直接挂载到数组上，建议单独维护配料数组属性，避免破坏数组标准结构）。

实现方法 #

方法1：提取配料为独立数组属性（推荐） #

用Object.entries筛选数字键对应的配料，再合并为商品对象的modifiers属性：

// 原始接口返回的商品数据
const rawItem = {
  0: {modifierId: 4, modifierName: 'Garlic', modifierPrice: 60},
  1: {modifierId: 1, modifierName: 'Tartar ', modifierPrice: 60},
  2: {modifierId: 3, modifierName: 'Herb ', modifierPrice: 60},
  itemId: 387,
  itemName: "BUFFALO WINGS",
  itemPrice: 500,
  itemQuantity: 0
};

// 筛选并提取数字键对应的配料
const modifiers = Object.entries(rawItem)
  .filter(([key]) => !isNaN(Number(key)))
  .map(([_, value]) => value);

// 构建规范的商品数据结构
const formattedItem = {
  ...rawItem,
  modifiers // 新增配料数组属性
};

模板中直接遍历formattedItem.modifiers即可：

<div *ngFor="let modifier of formattedItem.modifiers">
  {{modifier.modifierName}} - {{modifier.modifierPrice}}
</div>

方法2：自定义Angular管道（无需修改数据结构） #

如果不想改动原始数据，可写一个管道让*ngFor直接遍历对象中的配料：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'modifierList'})
export class ModifierListPipe implements PipeTransform {
  transform(obj: any): any[] {
    return Object.entries(obj)
      .filter(([key]) => !isNaN(Number(key)))
      .map(([_, value]) => value);
  }
}

模板中使用管道：

<div *ngFor="let modifier of rawItem | modifierList">
  {{modifier.modifierName}} - {{modifier.modifierPrice}}
</div>

方法3：手动循环提取（兼容旧环境） #

如果需要兼容不支持Object.entries的环境，可手动遍历对象键：

const modifiers = [];
for (const key in rawItem) {
  if (!isNaN(Number(key))) {
    modifiers.push(rawItem[key]);
  }
}

const formattedItem = {
  ...rawItem,
  modifiers
};

注意事项 #

• 不建议把商品属性（如itemId、itemName）直接挂载到数组上，这会破坏数组的标准结构，后续操作数组时容易出现逻辑混乱。
• 使用自定义管道时，默认是纯管道，只会在输入数据变化时重新计算，性能更优。

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