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

【问题标题】：Angular: Toggle class on an element's parent when using ngFor directiveAngular：使用 ngFor 指令时在元素的父级上切换类
【发布时间】：2018-04-30 08:10:20
【问题描述】：

我通过将复选框放置在标签内来将其样式化为按钮

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

我需要根据复选框是否被选中来切换父标签的类。现在，这很容易使用 [ngClass] 和布尔值。问题是，我还使用 *ngFor 指令循环元素。这显然曾经在 Angular 1.x.x 中工作，但在 Angular 2/4/... 中，它为所有重复的元素添加/删除了类。这可以通过直接访问父 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>

【问题讨论】：

标签： angular ngfor ng-class

【解决方案1】：

使用*ngFor 在相同大小的数组（在我的示例中为this.checked）或作为数据数组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>

【讨论】：

谢谢，这很有帮助。结果我还需要向对象添加其他属性。

【解决方案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')
}

随意调整

【讨论】：