ngForループの要素の値を変更します

Question

私はオブジェクトのグループをループしている状況があります。オブジェクトごとにボタンをクリックするとisActiveの変数をtrueに切り替える必要がありますが、これをループ内のその1つの要素に固有のものでなければなりません。現在は、isActiveがコンポーネント変数であるため、すべての要素をアクティブにすることしかできません。

私はそれが代わりに各項目の状態を保持するクラスメンバを導入するhttps://plnkr.co/edit/biOfbIjMxjOMUMFWOgyY?p=preview

Answer 1

を助けるかもしれない期待してplunkrを作成し、あなたはそれがアイテム自体にバインド保持することができます。次のようにテンプレートを変更します。

<ul> 
    <li *ngFor="let item of list" [ngClass]="{'is-active': item.isActive}"> 
     <h2>{{ item.title }}</h2> 
     <p>{{ item.body }}</p> 
     <button (click)="item.isActive = !item.isActive">Toggle active</button> 

     <div class="active" *ngIf="item.isActive"> 
     <small>This should show for only this object in the loop</small> 
     </div> 
    </li> 
    </ul> 

追加設定は不要です。