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>

私は、ポップアップウィンドウのngmodal使用されるが、ポップアップモデルのいずれかの種類を取得していないイムこの私のhtmlコード。 私は 'ng2-bootstrap'からインポート{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