Angular，当用户单击按钮或多次提交时如何处理？

拉吉夫·库马尔

我们如何防止用户多次提交？当前的问题是当用户多次点击提交时，它会创建多个用户，它应该只创建一次并在创建另一个之前等待

#html代码

<button mat-flat-button color="primary" [disabled]="userStatus == 'USER_EXISTS_ON_CURRENT_ACCOUNT'" (click)="createUser()">Create
                        User</button>

#ts 代码

createUser() {
    this.accountService.create(this.modelForm.value).pipe(
      finalize(() => {
        this.isInProgress = false;
      })
    ).subscribe({next: (res) => { this.notificationService.showSuccess('User has been created successfully.');
        this._router.navigate(['settings/user']);
      },
      error: (err) => {this.notificationService.showError('Something went wrong, Try again later.');
        this.isInProgress = false;
      },
      complete: () => {
        this.isInProgress = false;
      },
    });
  }

纳夫纳特·贾达夫

我稍微更新了你的代码，

1 - 我们必须在模板中创建一个用户按钮并且

    <button #createUserBtn mat-flat-button color="primary" [disabled]="userStatus == 'USER_EXISTS_ON_CURRENT_ACCOUNT'"> CreateUser </button>

2 - 在 .ts 文件中访问创建用户按钮

@ViewChild('createUserBtn', {static:true}) button;

3 - 创建变量clicks$来存储点击事件

clicks$: Observable<any>;

4 - 在 ngOnInit: 初始化clicks$变量以监听点击事件

this.clicks$ = fromEvent(this.button.nativeElement, 'click');

5 - 在 ngOnInit 中：在每个点击事件上，即click$我们将把我们的事件传递给exhaustMap

ExhaustMap 的美妙之处在于，一旦第一个（外部 observable）事件被触发，它将停止监听事件（外部 Observable），直到它完成其内部 observable

所以在我们的例子中，当用户第一次点击按钮（事件）时，exhaustMap将停止监听按钮点击事件，直到完成我们的 API 调用createUser()。我们将使用该handleResponse()方法处理这个 API 调用 observable 。

ngOnInit() {
    this.clicks$ = fromEvent(this.button.nativeElement, 'click');
    
    const result$ = this.clicks$.pipe(
        tap(x => console.log('clicked.')),
        exhaustMap(ev => {
            console.log(`processing API call`);
            return this.createUser();
        })
    );
    
    result$.subscribe(this.handleResponse());
}

创建用户 API 调用

createUser(): Observable<any> {
    return this.accountService.create(this.modelForm.value).pipe(
      finalize(() => (this.isInProgress = false))
    );
  }

处理响应

handleResponse(): any {
    return {
      next: res => {
        this.notificationService.showSuccess('User has been created successfully.');
        this._router.navigate(['settings/user']);
      },
      error: err => {
        this.notificationService.showError('Something went wrong, Try again later.');
        this.isInProgress = false;
      }
      complete: () => this.isInProgress = false;
    };
  }

演示

如果您无法访问按钮，您可以将 ngOnit 代码移动到AfterViewInit让我知道是否有任何错误，因为我还没有完全测试您的代码。

 ngAfterViewInit(): void {
    fromEvent(this.button.nativeElement, 'click')
      .pipe(
        tap(x => console.log('clicked.')),
        exhaustMap(ev => {
          console.log(`processing API call`);
          return this.createUser();
        })
      )
      .pipe(tap(x => console.log('Api call completed....')))
      .subscribe(this.handleResponse());
  }

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。