角2：参照渡しのオブジェクトが正常に動作しない

Question

アイテムは前にカートに追加されました。今、私はこの既存のアイテムの値を更新したいと思います。 addToCart関数では、findItem（）関数はカートをチェックし、既存の項目への参照を返します。アイテムが存在するので、findItem（）関数から返された既存のアイテムをnewItemに割り当てます。これはexistingItem = newItemです。カートに入っているexistingItemはnewItemの値を持つことになりますが、カート内のアイテムを印刷すると、existingItemはnewItem値ではなく以前の値を持ちます。

export class CartItem { 
    product: Product; 
    quantity: number; 
    itemTotal: number; 
    color: string; 
    protectionPlan: string; 
} 

export class Cart { 
    total: number = 0; 
    numberOfItems: number = 0; 
    items: CartItem[] = []; 

    findItem(id: String) : CartItem { 
    for(let i=0; i < this.items.length; i++) { 
     if(this.items[i].product._id == id) { 
     console.log("*************** item found ********************") 
     return this.items[i]; 
     } 
    } 
    return null; 
    } 

    addItem(newItem: CartItem) { 
    let existingItem: CartItem = this.findItem(newItem.product._id); 
    if(existingItem) { 
     existingItem = newItem; 
     //existingItem.quantity = newItem.quantity; 
     console.log("update item id = " + existingItem.product._id); 
     console.log("update item quantity = " + existingItem.quantity); 
     console.log("update item color = " + existingItem.color); 
     console.log("update item protectionPlan = " + 
existingItem.protectionPlan);    
    } else { 
     this.items.push(newItem); 
     this.numberOfItems++; 
    } 

    console.log("cart = " + JSON.stringify(this.items)); 
    } 
} 

Answer 1

このコード行：

let existingItem: CartItem = this.findItem(newItem.product._id); 

は、配列内のアイテムを指しているインスタンスを作成しています。

このコード行：

existingItem = newItem; 

は、新しいアイテムを指すように、そのインスタンスを変更しています。

アレイ内のアイテムを新しいアイテムで置き換えることはありません。

新しい項目の各要素を既存の項目にコピーするか、既存の項目を配列から削除して新しい項目を追加する必要があります。

Answer 2

これは、より多くのOOP関連する質問です。病気できるだけ明確に説明しよう：

addItem(newItem: CartItem) { 
    let existingItem: CartItem = this.findItem(newItem.product._id); 
    if(existingItem) { 
    ... 
    } 
} 

あなたがもしブロックを入力すると、あなたはは2、おそらく異なるオブジェクトを参照二つの異なるポインタを持っています。

は、ここから始めましょう。

あなたは次の操作を実行した場合：

existingItem = newItem; 

あなたは今同じオブジェクトを参照する二つのポインタを持っています。 だから基本的には、同じような何かをやって：

existingItem.quantity = newItem.quantity; 

効果はありません、あなたが自分自身で値を上書きしてしまいます。

既存のオブジェクトの値を変異させたいのように、一possiblityは、次のようにObject.assignを使用することです：

if(existingItem) { 
    Object.assign(existingItem,newItem); 
} 

をしかし、私の意見では、リストの内部状態を変異することは醜いの一種です。あなたのオブジェクトを維持する不変ほとんどの場合、何か良いです。だから、別のアプローチは、次のようになります。

addItem(newItem: CartItem) { 
    let index = //some function that gives you the index in the array where the existing item is, or -1 if not present 
    if(index!=-1) { 
     items.splice(index,1,newItem); // there is another approach with the .filter operator 
     this.items = [...items];// see spread operator 
    } else { 
     this.items = [...items,newItem]; // see spread operator 
     this.numberOfItems++; // this is kinda silly, as items.length would give you this value 
    } 

}

この方法であなたは新しいリスト要素が更新または追加されるたびに作成されています。不変性と方法についてのいくつかのより多くの余分な情報については

は、あなたのプログラムの現在の行動が実際に期待されるものです見here!