时间戳

首页 > 解决方案 > 提交表单超时后如何在页面上显示错误？

angular - 提交表单超时后如何在页面上显示错误？

问题描述

我正在研究一种将数据提交到使用 Spring Boot 编写的后端休息服务的 Angular 表单。我需要添加一个功能，以在一定时间后数据提交失败的情况下显示错误。目前，具有表单的页面会一直加载，并且不会在表单上显示任何错误。我想为 Rxjs 使用超时功能，但我不知道如何实现它。

我的特定表单提交的代码片段如下：

this.apiService.afisEnroll(applicant).subscribe(data => {
  if (data.response_code == 210) {
    this.blockUI.stop();
    console.log(`applicant %s enrolled successfully`, applicant.pbuNo);
    var obj = JSON.stringify(this.applicants[this.applicants.length - 1]);
    if (obj == JSON.stringify(applicant)) {
      console.log("this is the last applicant");
      this.captureEnrollmentDetailsForCOMPAS();
    }
  }
  else {
    this.blockUI.stop();
    return this.toast.error("Applicant is already enrolled");
  }
},
  (err) => {
    console.error(err);
    this.blockUI.stop();
    return this.toast.error("error enrolling applicant");
  });

标签： angulartypescript

解决方案

使一个可变的布尔类型最初将其分配为 false，例如 var codeExecute =false; 做你所有的工作

   setTimeout(function() {
    this.apiService.afisEnroll(applicant).subscribe(data => {
        if (data.response_code == 210) {
            codeExecute =true;  // addition code
             this.blockUI.stop();
            console.log(`applicant %s enrolled successfully`,applicant.pbuNo);
            if 
                (JSON.stringify(this.applicants[this.applicants.length - 1]) == 
                    JSON.stringify(applicant)) {
                    console.log("this is the last applicant");
                    this.captureEnrollmentDetailsForCOMPAS();
                }
                            //this.applicantenrolledsuccessfully = true;
                        }
                        else {
                            this.blockUI.stop();
                            return this.toast.error("Applicant is already enrolled");
                        }
                    }, (err) => {
                        console.error(err);
                        this.blockUI.stop();
                        return this.toast.error("error enrolling applicant");
                    });
}, 1000);
if(!codeExecute){
    codeExecute = true;
    return this.toast.error("Time out error Please try again");
}

推荐阅读