角度为2的三态复选框

Question

我想做一个有三种状态的输入框：已检查、未检查和已交叉(也称为失败(目前，我可以进行检查/取消检查并相应地更改计算

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

但是，我在添加crossed(X(复选框时遇到问题。有人知道该怎么做吗？我应该有这样的状态吗：

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

并添加样式并相应地进行更改？我不知道如何添加三种样式而不是两种。

Answer 1

复选框的不确定状态可以通过属性绑定进行设置。以下是标记的简化版本，显示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;
}
}
}

有关演示，请参阅此stackblitz。