Angular：取消選中不確定復選框不起作用

Question

我有很簡單的要求。 假設復選框具有三種狀態，不確定、選中和未選中。 我想要的是 ：

• 當點擊不確定的復選框時，它應該取消選中
• 當點擊選中的復選框時，它應該取消選中
• 當點擊未選中的復選框時，它應該被選中

但是在 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 }} 

我想實現父子復選框並選擇與此小提琴類似但有角度的所有功能。

Answer 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;
      }
    }
  } 

供參考： 防止復選框完全勾選/檢查