Angular 如何将第三状态添加到复选框？

您好，我在angular开发web应用程序。我正在显示带有三种状态的复选框。我正在区分使用css类的状态。这三种状态是交叉标记、复选标记和空白。下面是实现部分

<div *ngIf="node.data.checked==true && node.data.allow==true">
    <label class="container">
        <input (change)="check(node, !node.data.checked)" type="checkbox" [indeterminate]="node.data.indeterminate" [checked]="node.data.checked">
        <span class="checkmark"></span>
        {{ node.data.name }}
    </label>
</div>

<div *ngIf="node.data.checked==true && node.data.allow==false">
    <label class="container">
        <input (change)="check(node, !node.data.checked)" type="checkbox" [indeterminate]="node.data.indeterminate" [checked]="node.data.checked">
        <span class="checkmark xmark"></span>
        {{ node.data.name }}

    </label>
</div>

<div *ngIf="node.data.checked==false">
    <label class="container">
        <input (change)="check(node, !node.data.checked)" type="checkbox" [indeterminate]="node.data.indeterminate">
        <span class="checkmark"></span>
        {{ node.data.name }}

    </label>
</div>

上面是圆形的路径。例如，如果选中该复选框，则当用户单击该复选框时，该复选框应变为叉，如果用户再次单击该复选框，则该复选框为空，如果用户再次单击该复选框，则该复选框应变为选中，依此类推。展示我所做的部分。有人能帮我完成我上面说的工作吗？任何帮助都将不胜感激。谢谢。

您可以使用

如果绑定到

change

事件，则可以通过复选框，如下所示

<input type="checkbox" (change)="toggle($event.target)" />

---

查看有关不确定状态的基本指南谢谢您的帮助。在javascript中，我们使用切换（this）发送复选框。如何在角度上实现它？当您需要“圆形”路径时，请使用“余数”操作符：cb.checked=（cb.checked+1）%3为您提供余数0,1,2,0,1,2,0,1,2…它可以工作。谢谢但是当绑定数据时，我应该这样做吗？readonly=“readonly”？例如，当将数据绑定到复选框时，您应该能够使用

[不确定]=“true”

进行绑定，也可以使用

[（ngModel）]

进行绑定。我想显示中间状态。{{node.data.name}这不起作用。我能知道我错过了什么吗？一切都正常。我们可以使用样式编辑中间状态的设计吗？CSS中有一个不确定的psuedo选择器，这可能会有所帮助。你想展示什么？

<input type="checkbox" (change)="toggle($event.target)" />

toggle(cb) {
  if (cb.readOnly) cb.checked = cb.readOnly = false;
  else if (!cb.checked) cb.readOnly = cb.indeterminate = true;
}