Angular：取消选中不确定复选框不起作用答案

【问题标题】：Angular : uncheck indeterminate checkbox not workingAngular：取消选中不确定复选框不起作用
【发布时间】：2020-12-29 22:43:43
【问题描述】：

我的要求很简单。可以说复选框具有三种状态，不确定，选中和未选中。我想要什么：

当点击不确定的复选框时，它应该取消选中
当点击选中的复选框时，它应该取消选中
当点击未选中的复选框时，它应该被选中

但在 angular2 中，我无法解决第一个要求。无论我做什么，当点击不确定的复选框时，它都会被选中（不是预期的）。

请查看stackbliz

export class AppComponent {
  name = 'Angular';
  milestone = { status: "crossed" };
  checkMilestone(milestone) {
    switch (milestone.status) {
      case "crossed": {
        milestone.status = "unchecked";
        break;
      }
      case "unchecked": {
        milestone.status = "checked";
        break;
      }
      case "checked": {
        milestone.status = "unchecked";
        break;
      }
    }
  }
}

HTML

<input type="checkbox" [indeterminate]="milestone?.status === 'crossed'" [checked]="milestone?.status === 'checked'" (change)="checkMilestone(milestone)"> Status: {{ milestone?.status }}

我想实现父子复选框并选择与this fiddle 类似但有角度的所有功能。

【问题讨论】：

我记得一个关于复选框和模型绑定到选中属性的角度提醒：只要我记得，当模型更改时，选中的属性不起作用（或者更好的是，被忽略），但我可能错了。您是否尝试过绑定模型？您可以只使用一个条件，即设置不确定模型是空还是未定义。
我的意思是这样的：stackblitz.com/edit/angular-checkbox-states-hgy56j?file=src/app/…
@briosheje 非常感谢！它按照您的建议工作！

标签： javascript angular checkbox

【解决方案1】：

是的，您可以实现，只需将代码更新为以下内容：

HTML：

<input #input type="checkbox" [indeterminate]="milestone?.status === 'crossed'" 
(click)="checkMilestone($event)"
> Status: {{ milestone?.status }}

打字稿：

  checkMilestone(e) {
    
    switch (this.milestone.status) {
      case "crossed": {
        e.target.checked = false;
        this.milestone.status = "unchecked";
        break;
      }
      case "unchecked": {
        this.milestone.status = "checked";
        break;
      }
      case "checked": {
        this.milestone.status = "unchecked";
        break;
      }
    }
  }

参考： Prevent checkbox from ticking/checking COMPLETELY

【讨论】：