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

复选框有三种状态

1 个答案: