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

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

当用户单击切换时，我不希望切换立即更改，而是应该等待更改函数执行，然后更改其在视图上的外观

当前，切换先更改，不等待函数执行。如果函数失败，我不希望切换改变状态

我尝试了

event.preventDefault（）

但不知何故，我没能达到预期的效果



[Css不包括]
您的.ts应该如下所示：

  toggleStatus: boolean;

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

    //this.toggleStatus = true;

  }

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

所以

到

这里有一个stackblitz和你的例子

一旦身份验证（假设异步）完成，您将需要一个fetch/promise或observable来执行外观更改。除了preventDefault之外，您可能还需要使用StopperPropagation。你能发布一个调试链接吗？尝试CodeSandbox

试试这个

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

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

用两个答案的组合让它工作

改为

[ngModel]=“切换状态”
使用

evt.stopPropagation（）

请共享您的TS和CSS，当验证功能完成时，必须将
[（ngModel）]
更改为
[ngModel]
，并更改
切换状态
[ngModel]="toggleStatus"

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

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

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

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