停止复选框更改状态，直到函数执行

Question

我的应用程序中有一个切换/滑动切换按钮。 下面是它的外观

当用户单击切换开关时，我不希望切换开关立即更改，而应等待更改功能执行，然后更改其在视图中的外观。

当前，切换开关会先更改，并且不等待函数执行。如果功能失败，我不希望切换开关更改状态

我尝试了event.preventDefault();

但是以某种方式我无法达到预期的结果。

<div>
   <label class="i-switch i-switch-lg pull-right">
      <input type="checkbox" name="myToggle" [(ngModel)]="toggleStatus" (click)="authenticate($event)" />
         <i></i>
   </label>
 </div>

[不包括CSS]

Answer 1

您的.ts应该如下所示：

  toggleStatus: boolean;

  authenticate($event){
    $event.preventDefault()
    // do stuff

    //this.toggleStatus = true;

  }

并在html中将绑定从双向更改为单向

如此

[(ngModel)]="toggleStatus"

到

[ngModel]="toggleStatus"

这是您的示例中的一个闪电战

https://angular-xfziiu.stackblitz.io

Answer 2

一旦身份验证（假设异步）完成，您将需要获取/承诺或可观察到的外观来执行外观更改。除了preventDefault外，您可能还需要使用stopPropagation。您能否发布调试链接？尝试使用CodeSandbox。

尝试一下

hello(evt) {
    evt.preventDefault();
    evt.stopPropagation();

    fetch("https://jsonplaceholder.typicode.com/todos/1").then(
      this.handleAuthentication
    );
}
handleAuthentication() {
    alert("you can change button now");
  }
}

Answer 3

结合两个答案一起使用

更改为

[ngModel] =“ toggleStatus” 并使用

evt.stopPropagation（）

<input type="checkbox" name="myToggle" [ngModel]="toggleStatus" (click)="authenticate($event)" />

并在验证功能中使用

authenticate(e: any) {
    e.preventDefault ? e.preventDefault() : (e.returnValue = false);
    e.stopPropagation();
}