Question

我的angular4应用程序中发生了一件非常奇怪的事情，我无法理解我的生活。

基本上我是

将产品和项目的完整列表中的（@Input）加载到名为products的对象中。
在名为entity的对象中加载（@Input），该对象包含具有完整产品列表子集的产品属性，即仅包含用户已保存到实体中的产品。
加载产品数据 - 我将每个产品从this.products推送到productSelectionData
然后我运行一个循环遍历productSelectionData中所有项的函数，并检查实体对象是否有任何名为selected的属性，并将selected的值更改为true

此时一切都很好看

然后我运行一个函数来拼接出选定属性为false的selectedProducts和items。

这是问题发生的地方。由于某些原因，对我来说，productSelectionData对象和selectedProducts对象都没有显示从数组中拼出的selected = false的项目。

以下代码：

import { Component, Input, OnInit } from '@angular/core';
import { ProposalModel, ProductModel } from './../../../shared/models/';

@Component({
  selector: 'mj-proposal-edit',
  templateUrl: './proposal-edit.component.html',
  styleUrls: ['./proposal-edit.component.scss']
})
export class ProposalEditComponent implements OnInit {

  @Input() entity: ProposalModel;
  @Input() products: ProductModel[];

  productSelectionData: any;
  selectedProducts: any;

  constructor() { }

  ngOnInit() {

    // Load all products and items
    this.loadProductData();
    this.updateProductSelectionData();
    this.filterProductsSelected();

  }

  loadProductData() {
    this.productSelectionData = [];

    this.products.forEach(product => {
      this.productSelectionData.push(
        { productTitle: product.productTitle, items: product.items })
    });
    console.log('Product Selection, after load: ', this.productSelectionData);
    debugger;
  }

  updateProductSelectionData() {
    // Update Product Selection Object with previously selected data

    // 1. Check if there is previously saved data
    if (this.entity.products !== undefined) {
      // 2. Update productSelectionData with values saved in entity object
      this.productSelectionData.forEach(product => {
        if (this.entity.products !== undefined) {
          this.entity.products.forEach(entityProduct => {
            if (product.productTitle === entityProduct.productTitle) {
              if (product.items !== undefined) {
                product.items.forEach(item => {
                  if (entityProduct.items !== undefined) {
                    entityProduct.items.forEach(entityItem => {
                      if (item.code === entityItem.code) {
                        item.selected = true;
                        item.quantity = entityItem.quantity;
                        item.discount = entityItem.discount;
                      }
                    });
                  }
                });
              }
            }
          });
        }
      });
      console.log('Product Selection, after update: ', this.productSelectionData);
      debugger;
    }
  }

  filterProductsSelected() {
    this.selectedProducts = [];
    this.productSelectionData.forEach(product => {
      this.selectedProducts.push(product)
    });
    this.selectedProducts.forEach(selectedProduct => {
      selectedProduct.items.forEach(item => {
        const itemIndex = selectedProduct.items.indexOf(item);
        if (item.selected === false) {
          selectedProduct.items.splice(itemIndex, 1);
        }
        if (item.selected === undefined) {
          selectedProduct.items.splice(itemIndex, 1);
        }
      });
    });
    console.log('Selected Products, after filter: ', this.selectedProducts);
    console.log('Product Selection, after filter: ', this.productSelectionData);
    debugger;
  }

}

Answer 1

在您的filterProductsSelected中，您将产品（及其items数组）推送到this.selectedProducts数组中。

您最终会在items和this.selectedProducts中引用您的产品及其this.productSelectionData。

所以，当你在这里拼接时： selectedProduct.items.splice（itemIndex，1）;

您正在拼接相同的items数组。

我克隆了产品对象及其items数组，似乎有效：

function filterProductsSelected() {
    selectedProducts = [];
    productSelectionData.forEach(product => {
      // cloning the product :
      var productClone = clone(product);
      // and its items :
      productClone.items = product.items.slice();
      selectedProducts.push(productClone);
    });
    selectedProducts.forEach(selectedProduct => {
      selectedProduct.items.forEach(item => {
        const itemIndex = selectedProduct.items.indexOf(item);
        if (item.selected === false) {
            console.log("not selected");
          selectedProduct.items.splice(itemIndex, 1);
        }
        if (item.selected === undefined) {
            console.log("undefined selected");

        selectedProduct.items.splice(itemIndex, 1);
        }
      });
    });
    console.log('Selected Products, after filter: ', selectedProducts);
    console.log('Product Selection, after filter: ', productSelectionData);
    debugger;
  }

克隆功能代码：

function clone(obj) {
    if (null == obj || "object" != typeof obj) return obj;
    var copy = obj.constructor();
    for (var attr in obj) {
        if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
    }
    return copy;
}

同步的对象

1 个答案: