Bootstrap-ui Modal 在 Angular-Gantt 中设置时显示为空白

Question

我在尝试让我的模态出现时遇到困难。我不确定是否是因为模态与角度甘特图不兼容或者我的代码错误。目前我看到一个较暗的屏幕，好像那里应该有一个模式。

这是甘特图中按钮的代码：

JS：

'content':'<i class=\"fa fa-cog\" data-toggle="modal" data-target="#hp_modal" ng-click="scope.show_details(task.model)"></i>' + 'Gant Object'

HTML：

<div class='modal fade' id='hp_modal'>
  <div class='modal dialog'>
    <div class='modal-content'>
      <div class="modal-header">
        <h3>This is HP modal</h3>
      </div>
    </div>
  </div>
</div>

这是我点击齿轮后的图像：

https://i.sstatic.net/Purmp.jpg

Answer 1

您需要删除所有课程

modal

modal-dialog

和

modal-content

当您打开模态框时，Angular 已经自动创建它们。

您只需保留此标签即可：

  <div class="modal-header">
    <h5 class="modal-title">My Title</h5>
    <button type="button" class="btn-close" aria-label="Close"></button>
  </div>
  <div  class="modal-body">
    <input type="text" class="form-control" autofocus/>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>

那么如果你需要使用一些功能，比如

modal-dialog-centered

，你需要在open方法上使用NgbModalOptions：

  this.modalRef = this.modalService.open(
    this.dialogTemplateRef,
    {centered:true}
  );

Answer 2

检查同一页面上是否有相同模式或另一个模式的实例，其数据目标类被命名为当前模式，如果是，则只需重命名即可。