角度对象数组未正确填充

【问题标题】：Angular object array isn't filling up properly角度对象数组未正确填充
【发布时间】：2022-10-01 15:53:04
【问题描述】：

我有两个对象类，一个用于 CartFoodItem，由用户添加一个项目填充，一个 OrderItem 发送到数据库。当用户单击提交按钮时，onSubmit 函数将激活，并且应使用 CartFoodItem 对象数组中的数据填充 OrderItem 对象数组。问题是 OrderItem 数组中填充了最后添加的 CartFoodItem 中的数据。

控制台的外观

this.orderItems name Apples
this.orderItems name Strawberries
this.orderItems name Avocados
this.orderItems name Grapes
this.orderItems name Bananas
size of order items is 5
first of orderitems name is Bananas
last of orderitems name is Bananas

这是 orderItems 数组在 mysql 工作台中发布到数据库后的样子。

图像版本 enter image description here

文字版

id:    name:      image_url:                      quantity:  price:
\'90\', \'Bananas\', \'assets/images/foodItem/Bananas.png\', \'1\', \'6.89\'
\'91\', \'Bananas\', \'assets/images/foodItem/Bananas.png\', \'1\', \'6.89\'
\'92\', \'Bananas\', \'assets/images/foodItem/Bananas.png\', \'1\', \'6.89\'
\'93\', \'Bananas\', \'assets/images/foodItem/Bananas.png\', \'1\', \'6.89\'
\'94\', \'Bananas\', \'assets/images/foodItem/Bananas.png\', \'1\', \'6.89\'

它应该看起来像这样

id:    name:    image_url:                                 quantity:  price:
\'90\', \'Apples\', \'assets/images/foodItem/Apples.png\',             \'1\', \'8.38\'
\'91\', \'Strawberries\', \'assets/images/foodItem/Strawberries.png\', \'1\', \'10.78\'
\'92\', \'Avocados\', \'assets/images/foodItem/Avocados.png\',         \'1\', \'3.69\'
\'93\', \'Grapes\', \'assets/images/foodItem/Grapes.png\',             \'1\', \'3.50\'
\'94\', \'Bananas\', \'assets/images/foodItem/Bananas.png\',           \'1\', \'6.89\'

如果有人可以解释为什么我的 OrderItem 数组没有正确填充或如何正确填充，请告诉我。这是代码：

CartFoodItem 类

export class CartFoodItem {

  id: number;
  name: string;
  imageUrl: string;
  price: number;
  protein: number;
  saturatedFat: number;
  transFat: number;
  cholesterol: number;
  fiber: number;
  sugars: number;

  // other nutritional values

  quantity: number;

  constructor() {

  }


}

OrderItem 类

export class OrderItem {

  name: string;
  imageUrl: string;
  quantity: number;
  price: number;

  constructor() {
  }

}

购物车详细信息组件

export class ShoppingCartDetailsComponent implements OnInit {

  cartFoodItems: CartFoodItem[] = [];
  orderItems: OrderItem[] = [];
  tempOrderItem: OrderItem = new OrderItem();

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


  onSubmit() {
    this.getOrderItems();
    console.log(\"size of order items is \" + this.orderItems.length);
    console.log(\"first of orderitems name is \" + this.orderItems[0].name);
    console.log(\"last of orderitems name is \" + this.orderItems[this.orderItems.length - 1].name);

    // post function for the orderItems object array
  }

  listShoppingCartDetails() {
    //fills the cartFoodItems object array with CartFoodItem objects
  }

  getOrderItems() {
    let count = 0;
    for (let tempCartFoodItem of this.cartFoodItems) {
      this.tempOrderItem.name = tempCartFoodItem.name;
      this.tempOrderItem.imageUrl = tempCartFoodItem.imageUrl;
      this.tempOrderItem.quantity = tempCartFoodItem.quantity;
      this.tempOrderItem.price = tempCartFoodItem.price;
      

      this.orderItems.push(this.tempOrderItem);
      console.log(\"this.orderItem\'s name \" + this.orderItems[count].name);
      count++;
    }

  }

}

请发布完整的代码。不只是碎片。 ***.com/help/how-to-ask

【解决方案1】：

我看到了问题。您将数组的每个实例设置为 getOrderItems() 中的同一个对象。您将 this.tempOrderItem 的名称、imageUrl 等更改为 tempCartFoodItem 中的任何内容，而不是每次更改this.tempOrderItem 的名称时都创建一个新对象。在 getOrderItems() 中的for 循环之后，如果您设置 this.tempOrderItem.name = 'this is all the same object'; ，您将明白我的意思。

您最可能想要的是删除 this.tempOrderItem 实例变量并在 getOrderItems() 中更改以下内容：

  getOrderItems() {
    let count = 0;
    for (let tempCartFoodItem of this.cartFoodItems) {
      const tempOrderItem = new OrderItem();
      tempOrderItem.name = tempCartFoodItem.name;
      tempOrderItem.imageUrl = tempCartFoodItem.imageUrl;
      tempOrderItem.quantity = tempCartFoodItem.quantity;
      tempOrderItem.price = tempCartFoodItem.price;
      

      this.orderItems.push(tempOrderItem);
      console.log("this.orderItem's name " + this.orderItems[count].name);
      count++;
    }

  }

希望这会有所帮助。

【讨论】：

分享于2022年10月08日 angular typescript 问答