ブートストラップドロップダウンリストがbsグリッドで角2で開かない

Question

私はブートストラップグリッドを持っていて、いくつかのセルにはブートストラップのドロップダウンコンポーネントが表示されるはずです。ここでは、コードは次のとおりです。

<div class="table-responsive"> 
    <table class="table"> 
     <thead> 
      ... 
     </thead> 
     <tbody> 
      <tr *ngFor="let item of data"> 
       <td *ngFor="let col of columns"> 
        <!-- other cells --> 
        <div *ngIf='col.type=="dropdown"' class="dropdown"> 
         <!-- This dropdown 
         component 
         is not opened 
         inside my grid--> 
         <!--Dropdown Code starts--> 
         <div class="dropdown"> 
          <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" 
           aria-expanded="true"> 
    Dropdown 
    <span class="caret"></span> 
    </button> 
          <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
           <li><a href="#">Action</a></li> 
           <li><a href="#">Another action</a></li> 
           <li><a href="#">Something else here</a></li> 
           <li role="separator" class="divider"></li> 
           <li><a href="#">Separated link</a></li> 
          </ul> 
         </div> 
         <!--Dropdown Code ends--> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
    </div> 
</div> 

そして、それはそのように示されている：私は、ドロップダウンボタンをクリックした場合

しかし、彼らのリストが見えるようになりません。私のコンポーネントのどこか他の場所で同じコードを使用すると、正しく動作しています。

エラーメッセージが表示されず、ブートストラップが正しくロードされています（他のすべてのコンポーネントも機能します）。これで間違っているのは何ですか？

Answer 1

私が覚えているように、ブートストラップドロップダウンはjQueryプラグインを使用すると、あなたはAngular2で発生し、具体的*ngIfとの角度は、（あなたのケース<div class="dropdown">で）内容を再現していることは何ですか

$('.dropdown-toggle').dropdown() 

を呼び出すことで、すべてのドロップダウンを初期化する必要があります条件が変わるたびに（コンディションが trueでないと、内部のHTML部分全体がページから消えていることがわかります）。あなたがページの内容を読み込んでも存在せず、後で作成されたとしても...。グリッドドロップダウンがレンダリングされる前に初期化が行われます。

だから私はあなたのcol.typeが変更されるたびにブートストラップのドロップダウンを開始しなければならないと仮定します。

それとも、代わりに<div [hidden]="col.type == 'dropdown'">プロパティにバインドしようと...しかし、まだ初期化は、これらの要素が含まれているコンポーネントのngAfterViewInitの一つ、ngAfterContentInit、ngAfterContentChecked、ngAfterViewCheckedライフサイクルフック上で行う必要があるドロップダウンすることができます...

とにかく、私が代わりに既存のAngular2-ドロップダウンLIBSのいずれかを使用することができ提案する... angular-uiチームによって開発されたng2-bootstrapと呼ばれるプラグインが

Answer 2

があります。
だから、jQueryでangular2エコシステムを汚染するよりも使う方が良いと思います。
link