Angular2 - Wie ändert man ein bestimmtes Element?

Question

Ich habe mehrere (Zum Warenkorb hinzufügen) Schaltfläche auf meiner Seite, ich habe die Schaltfläche (zum Warenkorb hinzufügen) zum Ändern auf (klicken), so dass der Benutzer Elemente nahtlos aus dem Warenkorb hinzufügen können. Das Problem ist, dass, wenn der Benutzer auf eine der Schaltflächen klickt, alle von ihnen ändert! Ganz einfach, weil der Code nicht erkennt, auf welche Schaltfläche der Benutzer geklickt hat. Im normalen Szenario ist die Schaltfläche, die geändert werden sollte, die einzige, auf die der Benutzer geklickt hat! Aber leider weiß ich nicht, wie man es in Angular2 macht. Danke für Ihre Hilfe!

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

Warum Sie 3 verschiedene Tasten hat das gleiche amount Variable zu erhöhen?

Sollte jeder von diesen drei verschiedene Elemente sein?

Angenommen, Sie möchten 3 verschiedene Elemente, die Sie so etwas wie tun könnte:

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> 

Dies sollte eine Idee geben Ihnen. Sie müssen den Code ein wenig reparieren.

Answer 2

Sie wahrscheinlich Ihren Warenkorb als Komponente erstellen sollten:

my-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