角度：ngForディレクティブ

Question

を使用しているとき、私は私がするかどうかのチェックボックスに基づいて、親のラベルのクラスをトグルする必要があり、それのラベル

<label> 
<input type="checkbox" name="..."> 
</label> 

内側に配置することによって、ボタンなどのチェックボックスをスタイリングしてい要素の親に切り替えクラスチェックされます。これは[ngClass]とブール値を使うと簡単になります。問題は、* ngForディレクティブで要素をループしていることです。これは明らかにAngular 1.x.xで動作するのに使用されましたが、Angular 2/4/...では繰り返されるすべての要素のクラスを追加/削除します。 これは、親DOM要素classListに直接アクセスすることで簡単に解決できますが、これはAngularの悪い習慣とみなされます。これを行うには角度のある方法がありますか、私のアプローチを完全に変えなければなりませんか？

EDIT：my code EDIT 2：間違ったコードが修正されました。

<label *ngFor="let item of object.array" [ngClass]="{'label-active': checked}"> 
    {{item}} 
    <input (click)= "checked = !checked" type="checkbox" name="..." id="..." class="sr-only"> 
    </label> 

Answer 1

同じサイズ（私の例でthis.checked）のアレイで*ngForを用いて反復処理アレイの各項目についてチェック状態を維持する、またはデータアレイthis.object.array

内のアイテムのプロパティとして

export class MyComponent { 
    object; 

    someMethod() { 
    this.object = {}; 
    this.object.array = someData; // whereever you get that data 
    this.checked = new Arrray(this.object.array.length); 
    this.checked.fill(false); 
    } 
} 

<label *ngFor="let item of object.array; let i=index" 
    [class.label-active]="checked[i]"> 
    {{item}} 
    <input (click)= "checked[i] = !checked[i]" type="checkbox" name="..." id="..." class="sr-only"> 

    <!-- or --> 
    <input [(ngModel)]="checked[i]" type="checkbox" name="..." id="..." class="sr-only"> 
    </label>