對象同步

Question

我的angular4應用程序中發生了一件非常奇怪的事情，我無法弄清楚我的生活。

本質上我公司在產品和項目的完整列表

1. 加載（@input）爲對象調用的產品。
2. 在名爲entity的對象中加載（@Input），該對象包含具有完整產品列表子集的產品屬性，即只有用戶已保存到實體中的產品屬性。
3. 裝載的產品數據 - 我把每一件產品從this.products到productSelectionData
4. 然後我運行，通過在productSelectionData所有項目循環，並檢查是否有選擇的一個名爲屬性的任何項目，改變實體對象的功能選定爲true

此時一切的價值看起來不錯

然後我運行一個函數來拼接selectedProducts和物品與虛假選定的屬性。

這是問題發生的地方。出於某種原因，對我來說不明顯，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陣列。

您最終在this.selectedProducts和this.productSelectionData中都提到了您的產品及其items。

所以，當你在這裏拼接： selectedProduct.items.splice（itemIndex，1）;

您正在拼接相同的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; 
}