如何根据在 ngFor 中单击的父 div 来检查复选框？答案

【问题标题】：How to make a checkbox checked based on its parent div clicked inside ngFor?如何根据在 ngFor 中单击的父 div 来检查复选框？
【发布时间】：2021-06-24 14:10:13
【问题描述】：

我在 ngFor 中有一个复选框列表。每个复选框都有自己的父 div。我希望在单击 div 后检查复选框。

这是我的代码。

<div *ngFor="let option of qustions; let i = index" (click)="doCheckboxCheck()">
  <input type="checkbox" [value]="option.value">
  <span>Checkbox {{i}}</span>
</div>

【问题讨论】：

标签： javascript html angular typescript

【解决方案1】：

您可以将 Angular template reference variable 分配给 <input> 元素，并在 <div> 的 click 或 mouseup 事件中切换它的 checked 属性。

现在这可以修改复选框自身点击事件的默认行为，因此您也可以将[checked] 切换绑定到<input>。

<div 
  class="checkbox-container" 
  *ngFor="let option of questions; let i = index"
  (mouseup)="inputCheckbox.checked = !inputCheckbox.checked"
>
  <input
    #inputCheckbox
    class="checkbox"
    type="checkbox"
    [value]="option.value"
    (mouseup)="inputCheckbox.checked = !inputCheckbox.checked"
  >
  <span>Checkbox {{ option.value }}</span>
</div>

工作示例：Stackblitz

【讨论】：

【解决方案2】：

我们可以通过将索引传递给偶数处理程序来更改 div 单击时复选框的状态。请参考下面的链接，它有一个有效的解决方案，

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  questions = [
    { value: "Checkbox-1", checked: false },
    { value: "Checkbox-2", checked: false },
    { value: "Checkbox-3", checked: false },
    { value: "Checkbox-4", checked: false },
    { value: "Checkbox-5", checked: false }
  ];

  doCheckboxCheck(index: number): void {
     this.questions[index].checked = !this.questions[index].checked;
  }
}

Template:

<div *ngFor="let option of questions; let i = index" (click)="doCheckboxCheck(i)">
  <input type="checkbox" [value]="option.value" [checked]="option.checked">
  <span>Checkbox {{i}}</span>
</div>

编辑器网址 - https://stackblitz.com/edit/checkbox-click?file=src/app/app.component.ts

【讨论】：

附加提示：将this.questions[index].checked = true; 替换为this.questions[index].checked = !this.questions[index].checked; 以使该功能像切换按钮一样工作。