具有三种状态的复选框

Question

我正在尝试制作一个具有三种状态的复选框。为此，我制作了一种方法，当单击它时，它会在状态之间导航。问题是此方法仅在 HTML 更改后调用。所以它在更改 HTML 的状态后进入我的方法，使复选框的导航错误。

在 HTML 中更改它之前如何让它调用我的方法？

状态之间的导航：

我的HTML:

<div class="switch switch-group" [ngClass]="getClasses()"  appAttribute [states]="states" [attr.disabled]="(disabled == 'disabled') ? 'disabled' : null" >
  <input #inputSwitch type="checkbox" appAttribute [states]="states" class="switch-checkbox" (click)="changeState()">
  <label class="switch-label">Example</label>
</div>

我的component.ts:

  @ViewChild('inputSwitch') inputSwitch: ElementRef;

  changeState() {
    // Work
    if(this.states == 2) {    
      this.inputSwitch.nativeElement.checked == true ? false : true;
      console.log(this.inputSwitch.nativeElement.checked);      
    } 
    // Not work
    else if (this.states == 3) {
      switch(this.inputSwitch.nativeElement.checked)
      {
        case false:
          if(!this.inputSwitch.nativeElement.indeterminate) {
            this.inputSwitch.nativeElement.checked = true;
            break;
          } 
          else {
            this.inputSwitch.nativeElement.checked = false;            
            break;
          }
        case true:
          this.inputSwitch.nativeElement.indeterminate = true;
          break;
      }
    }
  }

Answer 1

感谢@Hagner，解决方案是创建一个控件，在单击事件时在 3 种不同状态之间切换。

HTML:

<div class="switch switch-group" [ngClass]="getClasses()"  appAttribute [states]="states" (click)="changeState()" [attr.disabled]="(disabled == 'disabled') ? 'disabled' : null" >
  <input #inputSwitch type="checkbox" appAttribute [states]="states" class="switch-checkbox">
  <span class="switch-warper">
  </span>
  <label class="switch-label">Example</label>
</div>

TS:

  changeState() {
    if(this.states == 2) {    
      if(this.inputSwitch.nativeElement.checked) {
        this.inputSwitch.nativeElement.checked = false;
      } else {
        this.inputSwitch.nativeElement.checked = true;
      }
    } 
    else if (this.states == 3) {

      switch(this.inputSwitch.nativeElement.checked)
      {
        case false:
          if(!this.inputSwitch.nativeElement.indeterminate) {
            this.inputSwitch.nativeElement.checked = true;
            break;
          } 
          else if(this.inputSwitch.nativeElement.indeterminate) {
            this.inputSwitch.nativeElement.checked = false;   
            this.inputSwitch.nativeElement.indeterminate = false;
            break;
          }
        case true:
          this.inputSwitch.nativeElement.checked = false;                    
          this.inputSwitch.nativeElement.indeterminate = true;
          break;
      }

    }

  }

SASS:

input[type=checkbox].switch-checkbox {
    display: none;
}

具有三种状态的复选框

Checkbox with three states

html

typescript

angular2-forms

angular