Angular2 - [ngClass]の問題

Question

divに条件付きクラスを追加しようとしていますが、特定のボタンをクリックすると、その条件に基づいてクラスが追加されます（これは問題ありません）。しかし、同じページ上の別のボタン（同じ条件を持つ）をクリックすると、クラスは最初のクラスから削除され、2番目のクラスに割り当てられます。

望ましい動作：

ボタンをクリックすると、その後、別の1つをクリック、それは最初の1からクラスを削除しないでください。単にFacebook上でのように（あなたはポストのlikeボタンをクリックし、その後、別のポストに行くことができると、likeボタンをクリック等。）

HTML

<div class="agreeBtn" (click)="like(review.objectId)" [ngClass]="{'agreeBtnClicked': updateBtnWithId === review.objectId && clicked}">I agree</div> 

.TSを

like(objId){ 

    this.updateBtnWithId = objId; 

if(this.updateBtnWithId === objId){ 
     this.clicked = true; 
    } 
} 

Answer 1

ロジックを再訪する必要があります。 これは、すべてのボタンに対して共通のブール変数clickedと共通のID があるために発生しています。これは、一度に1つの投稿のみがクラスを設定できることを意味します。

リスト内のボタンをトラッキングする変数の配列が必要です（clicked[]）。 または、あなたの例では、クラスを設定する投稿一覧の各reviewオブジェクトにlikedというプロパティがあります。

例： `updateBtnWithId`が設定されているクラス

like(obj){ 
    obj.liked=true; 
    //this.updateBtnWithId = objId; 

/* if(this.updateBtnWithId === objId){ 
     this.clicked = true; 
    }*/ 
}