Angular：使用 ngFor 指令时在元素的父级上切换 class

Question

我将复选框的样式设置为按钮，方法是将其放在标签内

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

我需要根据是否选中复选框来切换父标签的 class。现在，使用 [ngClass] 和布尔值会很容易。问题是，我还使用 *ngFor 指令循环元素。这显然曾经在 Angular 1.x.x 中工作，但在 Angular 2/4/... 它 adds/removes class 用于所有重复的元素。这可以通过直接访问父 DOM 元素 classList 轻松解决，但这在 Angular 中被认为是一种不好的做法。有什么 Angular 方法可以做到这一点，还是我必须完全改变我的方法？

编辑：我的代码编辑 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>

Answer 2

example.html

<div *ngFor="let item of object.array; let i = index">
    <div (click)="toggleIdField('toggleId_' + i)" [id]="'toggleId_' + i">
    </div>
</div>

example.ts（我的组件）

toggleIdField(id) {
    let element = document.getElementById(id) as HTMLElement;
    element.classList.contains('active') ? 
    element.classList.remove('active') : 
    element.classList.add('active')
}

随意改编

Angular：使用 ngFor 指令时在元素的父级上切换 class

Angular: Toggle class on an element's parent when using ngFor directive

ng-class

ngfor

angular