如何根据模式按钮的成功在特定时间禁用表单上的按钮

Question

这是Button的component.html代码，在模式的成功响应时需要禁用：

<button title="Bypass Authentication" (click) = "opendobAuthModal(user.id)">Bypass Authentication</button>

以及定义函数的component.ts文件：

opendobAuthModal(userID: number){
const modalRef = this.modalService.open(DobAuthModalComponent, { size: 'md' });
modalRef.componentInstance.id = userID;
}

这是模态的component.html，响应时上面的按钮应该被禁用：

<button type="submit" class="btn btn-primary btn-elevate" (click) = "checkDOB()" routerLink = "/customer-user-management" > Proceed </button>

模态的component.ts文件：

checkDOB(){
this.customerDetailService.updateDOB(this.id, this.customerDetailService.format(this.inputDOB)).subscribe(
(res: any) =>{
if(res.code == 200){
this.toasterService.success(res.message);
this.modalService.dismiss();
}
},
(err: any) => {
console.log(this.inputDOB);
this.toasterService.error(err.error.message);
this.modalService.dismiss();
}
)
}

和模式的service.ts文件：

updateDOB(customerId, date_of_birth){
return this.http.put(this.checkDOBUrl + `/${customerId}`, {date_of_birth}, {headers: this.getHeader()}) 
}

Answer 1

将禁用的属性添加到按钮模板：

<button title="Bypass Authentication" [disabled]="disableBypassAuth" (click) = "opendobAuthModal(user.id)">Bypass Authentication</button>

在组件类中，创建一个新变量disableBypassAuth，并在默认情况下将其设置为false。收到成功响应后，将varibale更新为true，如：

(res: any) =>{
if(res.code == 200){
this.toasterService.success(res.message);
this.modalService.dismiss();
// emit an observable and catch it in the component class to set the disableBypassAuth to true
}
},

Answer 2

在.ts文件中为modal添加以下代码后，它就工作了：

checkDOB(){
this.customerDetailService.updateDOB(this.id, this.inputDOB).subscribe(
(res:any) =>{
if(res.code == 200){
this.toasterService.success(res.message);
this.modalService.dismiss();
let disableBypassAuth = (document.getElementById(this.id) as HTMLInputElement);
disableBypassAuth.disabled = true;
setTimeout(function() {
disableBypassAuth.disabled = false;
}, 180000);
}
},
(err: any) => {
console.log(this.inputDOB);
this.toasterService.error(err.error.message);
this.modalService.dismiss();
}
)
}