Angular2 - 特定の要素を変更するにはどうすればよいですか？

Question

私は自分のページに複数の（カートに追加）ボタンがあるので、（カートに追加）ボタンをオン（クリック）にすると、カートからアイテムをシームレスに追加できるようになります。問題は、ユーザーがボタンの1つをクリックすると、すべてのボタンが変化することです。これは、コードがユーザーがクリックしたボタンを認識しないためです。通常のシナリオでは、ユーザーがクリックしたボタンは変更する必要があります。 しかし残念ながら、私はAngular2でそれを行う方法がわかりません。 ご協力いただきありがとうございます！

JS：

 addToCart(){ 
    if (this.amount == 0) { 
     this.isCartEmpty = true; 
    } else if (this.amount > 0) { 
     this.isCartEmpty = false; 
    } 
    } 

    addItem() { 
    this.amount++; 
    } 
    removeItem() { 
    this.amount--; 
    } 

はHTML：

<div *ngIf="isCartEmpty" (click)="addToCart()">ADD TO CART</div> 
    <div *ngIf="!isCartEmpty" (click)="addToCart()"><div> 

    <div>Element 1</div> 
    <div (click)="removeItem()">-</div> 
    <div>{{amount}}</div> 
    <div (click)="addItem()">+</div> 
    </div> 

    <div> 
    <div>Element 2</div> 
    <div (click)="removeItem()">-</div> 
    <div>{{amount}}</div> 
    <div (click)="addItem()">+</div> 
    </div> 

    <div> 
    <div>Element 3</div> 
    <div (click)="removeItem()">-</div> 
    <div>{{amount}}</div> 
    <div (click)="addItem()">+</div> 
    </div> 

Answer 1

あなたが同じamount変数をインクリメントする3種類のボタンがありますなぜ？

これらはそれぞれ3つの異なるアイテムとしますか？

あなたはあなたのような何かができる3種類のアイテムをしたいと仮定：

items = ['A', 'B', 'C'] 

amount = [0, 0, 0] 

addItem(index) { 
    this.amount[index]++; 
} 
removeItem(index) { 
    this.amount[index]--; 
} 

HTML：

<div *ngFor="let item of items; let i = index"> 
    <div (click)="removeItem(i)">-</div> 
    <div>{{amount[i]}}</div> 
    <div (click)="addItem(i)">+</div> 
</div> 

これはあなたのアイデアを与える必要があります。コードを少し修正する必要があります。

Answer 2

おそらくコンポーネントとしてあなたのカートを作成する必要があり

：

私-cart.component.ts

import {Component} from '@angular/core'; 

// Creating model here for simplicity. Should be in its own file 

export class CartItem { 
    public constructor(public name, public amount) { } 

    public addItem() { 
    this.amount++; 
    } 

    public removeItem() { 
    if (this.amount > 0) {this.amount--}; 
    } 
} 

@Component({ 
    selector: 'my-cart', 
    template:` 
    <p>My Cart</p> 
    <button (click)='addCartItem()'>Add Cart Item</button>a 
    <button (click)='cleanCart()'>Clean Cart</button><br> 
    <ul> 
    <li *ngFor="let item of cartItems"> 
     {{item.name}}, Amount = {{item.amount}} 
     <button (click)='item.addItem()'>Add</button> 
     <button (click)='item.removeItem()'>Remove</button> 
    </li> 
    </ul> 
    ` 
}) 
export class MyCart { 
    private cartItems: [CartItem] = []; 

    public addCartItem() { 
    this.cartItems.push(new CartItem('Cart item', 1)) 
    } 

    public cleanCart() { 
    this.cartItems = this.cartItems.filter(
     (current, i, array) => current.amount > 0; 
    ) 
    } 
} 

Check it out in Plunker