[英]Angular rxjs debounce to limit user from sending multiple requests
基本上我的问题是,当连接速度很慢时,用户能够多次按下保存按钮并且正在保存多个数据。 此问题不会在本地发生,但在暂存时会发生。
虽然我已经设置了 this.hasBeenSubmitted = true; 当请求完成并根据条件在按钮上[禁用]时,用户仍然能够多次单击按钮并且可以保存多次,这是错误的。
有人说 Angular rxjs debounce 可以解决这个问题,有人能告诉我这个吗? 谢谢你。 根据下面的代码,它将如何帮助我解决问题。 谢谢。
save(): void {
const create = this.requestFormService.createRequestData(this.form, this.respondents)
.subscribe(
(results: FeedbackRequest[]) => {
this.hasBeenSubmitted = true;
},
(error) => {
this.hasBeenSubmitted = false;
this.handleInvalidFields(error, 'Failed to save the Feedback Request as draft. One or more fields contain invalid values. Input a valid value to proceed.');
this.messageDialogService.show('Failed to save the Feedback Request as draft. One or more fields contain invalid values. Input a valid value to proceed.', true);
create.unsubscribe();
}
);
}
<button [disabled]="form.invalid || (!duplicateMode && !form.dirty) || (!editMode) || hasBeenSubmitted"
mat-raised-button *ngIf="form" (click)="save()" type="submit">
<ng-container>
<span>SAVE</span>
</ng-container>
</button>
如果我理解正确,您想限制用户多次点击保存,并且您说您已经应用了禁用条件。
您能否尝试重写您的保存按钮,如下所示。
save(): void {
this.hasBeenSubmitted = true;
const create = this.requestFormService.createRequestData(this.form, this.respondents)
.pipe(
take(1),
finalized(this.hasBeenSubmitted = false),
),
catchError((err) =>{
this.hasBeenSubmitted = false;
this.handleInvalidFields(error, 'Failed to save the Feedback Request as
draft. One or more fields contain invalid values. Input a valid value to proceed.');
this.messageDialogService.show('Failed to save the Feedback Request as
draft. One or more fields contain invalid values. Input a valid value to proceed.', true);
create.unsubscribe();
})
.subscribe(
(results: FeedbackRequest[]) => {
}
);
}
我改变的主要事情是执行this.hasBeenSubmitted = true;
在创建呼叫之前。
我希望它有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.