javascript - 如何使用 ng2-bootstrap 获取弹出窗口？

Question

<section class="main">
 <h1>Company Management</h1>
 <md-card>
   <button class="md-fab md-mini add-task" md-mini-fab title="Add" (click)="addCompany.show()">
    <md-icon style="color:white;">add</md-icon>
   </button>
      <div class="table-responsive">
     <table class="table adminTable">
       <thead>
         <th>Name</th>
         <th>Email</th>
         <th>country</th>
         <th>Action</th>
       </thead>
       <tbody>
         <tr *ngFor="let company of companies">
           <td>{{company.user_name}}</td>
           <td>{{company.email}}</td>
           <td>{{company.country}}</td>
           <td>
               <button class="btn" md-raised-button>Guide</button>
               <button class="btn" md-raised-button>Pin</button>
               <button class="iconBtn first">
                <i class="fa fa-pencil" aria-hidden="true"></i>
               </button>
               <button class="iconBtn second">
                 <i class="fa fa-trash-o" aria-hidden="true"></i>
               </button>
           </td>
         </tr>
       </tbody>
     </table>
   </div>
 </md-card>
</section>
<div bsModal #addCompany="bs-modal" class="modal fade " tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-md">
  <div class="modal-content">
     <div class="modal-body">
     
     </div>
     <div class="modal-footer cat-btn">
       <button md-raised-button class="md-raised cancel color-white" (click)="addCompany.hide()">Cancel
       </button>
       <button md-raised-button class="md-raised save color-white">Save</button>
     </div>
   </div>
 </div>
</div>

这是我的 html 代码，其中我将 ngmodal 用于弹出窗口，但我没有得到任何类型的弹出窗口模型。 我已经从 'ng2-bootstrap' 导入了 import { ModalModule }；在 app.module.ts 文件中 你能帮我解决这个问题吗

Answer 1

您的代码 100% 没问题，模板方面没有问题。

但可能的问题可能是:

1) 仅导入 ModalModule 而不是 ModalModule.forRoot()

import { ModalModule } from 'ngx-bootstrap';

@NgModule({
  imports:      [ ... , ModalModule.forRoot() ],
  ...
})

2) 忘记添加css

---

这是静态模式的工作示例，您可以将您的代码与此进行比较:

https://stackblitz.com/edit/angular-ngx-bootstrap