除非第二次單擊，否則不會顯示ngBootstrap Modal

Question

我創建了一個名為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沒有任何成功從第一次合作。

如果我將打開的模式服務移動到拒絕回調之外，則可以正常工作。

任何幫助深表感謝。

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