ngBootstrap 模式不显示，除非在第二次点击之后答案

【问题标题】：ngBootstrap Modal is not showing unless after second clickngBootstrap 模式不显示，除非在第二次点击之后
【发布时间】：2019-04-13 09:36:09
【问题描述】：

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

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

    });

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

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

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

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

非常感谢任何帮助。

【问题讨论】：

你确定当用户登录失败时这个var importModal = this.modalService.open(ImportCardModalComponent);被触发了吗？我认为它只会在你有错误时触发。
尝试使用订阅而不是 then 看看你得到了什么，还会在错误部分中放置一个控制台日志以检查第一个请求何时到达错误部分。
嗨 Maihan，是的，我确定它被解雇了。因为正确添加了 DOM 元素，并且如果我使用 chrome 开发人员控制台更改 DOM 元素，则会显示模式。
您好，我不能使用 subscribe，因为 logInRegular 是一个调用许多 Web 服务器和端点并返回一个最终 Promise 的 Promise 链。但我会尝试
@NadeemKhoury 检查此blog.angular-university.io/…

标签： javascript css angular bootstrap-modal ng-bootstrap

【解决方案1】：

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

获取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();
    });

【讨论】：

这对我来说就像 angular 10 的魅力一样。确保在组件文件的头部添加 `import { ApplicationRef } from '@angular/core `