javascript - ngBootstrap Modal 不显示，除非第二次点击

我创建了一个名为 ImportCardModalComponent 的模态组件。
如果登录失败，必须打开此组件。如下:

this.authSerivce.logInRegular(this.model).then(result => {
      console.log(result);
    }, error => {
      var importModal = this.modalService.open(ImportCardModalComponent);

    });

问题是该对话框不会出现，除非我单击屏幕上的按钮两次并启动该服务两次。
我第一次单击按钮时，DOM 元素添加成功，但 class 中没有 css <ngb-modal-backdrop> and <ngb-modal-window> 。如下所示。

第二次单击按钮时，classes 显示正确。如下图:

模态必须在背景元素中包含 class ="modal-backdrop fade show"。以及 window 元素中的 class="modal fade show d-block" 。

我尝试将 modalService 与 NgbModalOptions backdropClass 和 windowClass 一起使用，但从第一次开始就没有成功。

如果我将打开的模式服务移到拒绝回调之外，它工作正常。

任何帮助深表感谢。

最佳答案

一种方法是在模态服务调用后手动触发更改检测。

获取ApplicationRef的引用

constructor(private appRef: ApplicationRef,...){}

然后调用更改检测:

this.authSerivce.logInRegular(this.model).then(result => {
      console.log(result);
    }, error => {
      var importModal = this.modalService.open(ImportCardModalComponent);
      this.appRef.tick();
    });

关于javascript - ngBootstrap Modal 不显示，除非第二次点击，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53232110/