クリック時のボタンの外観を変更するAngular2

Question

Angular2アプリの*ngForの配列にボタン要素があります。

ボタンの構造は次のとおりです。私はそれをクリックすると

<button> 
    <span class="price">{{ product.price }}</span> 

    <span class="text"> Add me! </span> 
</button> 

私はスパン.text内のテキストを削除し、他の内部なめらか配置する必要があり、.priceスパン補間を表示しない<span class="text"> Added! </span>を言います。

私は、次の方法でそれを作ってみました：それは正常に動作しますが、問題はそれがすべてのボタンを変更することである

private isPressed = false; 

：

<button [textContent]="isPressed? 'Added!' : 'Add me' "></button> など、クラス内の対応するプロパティを宣言同時に、クリックしたものだけを変更する必要があります。

正常に動作させる正しい方法は何ですか？

Answer 1

とにかくどこかに追加された製品を保管しています。例えば、適切なボタンのラベルを表示するには、この情報を使用してください：

<button (click)='addProduct(product)'> 
    <span class="price" *ngIf="!isProductAdded(product)">{{ product.price }}</span> 
    <span class="text">{{ isProductAdded(product) ? 'Added!' : 'Add me!'}}</span> 
</button> 

addProduct(product)とisProductAdded(product)あなたのコンポーネントで定義する必要があります。

Answer 2

コメントに示唆されているように、商品アイテム自体に選択されたフラグを保持する必要があります。

<button (click)="selectProduct(product)"> 
    <span class="price">{{ product.price }}</span> 
    <span class="text">{{ product.selected ? 'Added!' : 'Add me!' }}</span> 
</button> 

とコントローラで：

selectProduct(product) { 
    // You probable want to make HTTP request here to save product 
    // and on success set selected flag, or do something else.. 
    product.selected = !product.selected 
}