角度为 2 的三态复选框答案

【问题标题】：Three state checkbox with angular 2角度为 2 的三态复选框
【发布时间】：2019-04-02 18:34:12
【问题描述】：

我想做一个具有三种状态的输入框：选中，未选中和交叉（又名失败）目前，我能够进行检查/取消检查并相应地更改计算

 &lt;input type="checkbox" [ngStyle]="{content: expression}" *ngIf="milestone?.description" [checked]="milestone?.status == 'checked'" (change)="checkMilestone(milestone,initiative, $event, '')"&gt;

但是，我无法添加 crossed (X) 复选框。有谁知道应该怎么做？我应该有这样的陈述：

states = [
    { id: 0, status: 'checked'},
    { id: 1, status: 'unchecked'},
    { id: 2, status: 'crossed'}
];

并添加样式并相应地更改它们？我不确定如何添加三个样式而不是两个。

【问题讨论】：

看到这个帖子：Indeterminate checkboxes
@Silvermind - 你要发表你的评论作为答案吗？
@ConnorsFan 如果我知道如何使用与 ngModel 和/或 formControl 兼容的东西来做到这一点，我会的。然而，它并不像听起来那么微不足道。这就是为什么我用纯 javascript 评论了一个示例博客，因为它不足以作为 imo 的答案。
我建议您不要使用复选框类型的输入，而应该使用您需要的三种状态的逻辑来制作您的 on 组件。

标签： javascript css angular typescript checkbox

【解决方案1】：

复选框的indeterminate 状态可以用property binding 设置。这是您的标记的简化版本，显示了 indeterminate 状态绑定：

<input type="checkbox" [indeterminate]="milestone?.status === 'crossed'" 
  [ngModel]="milestone?.status === 'checked'" (ngModelChange)="checkMilestone(milestone)">

checkMilestone 方法可能是这样的：

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

请参阅this stackblitz 以获取演示。

【讨论】：

好人谢谢你。我知道有什么可以做的，但我不知道它叫[indeterminate]