Question

我将复选框设置为按钮，将其置于其标签内

<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>

Answer 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>

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（MyComponent）

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

随意调整

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

2 个答案: