引導下拉列表中BS網格不打開在角2

我有一個自舉網格以及在一些細胞中有應顯示的自舉的一個下拉部件。下面是代碼：引導下拉列表中BS網格不打開在角2

<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>

並證明這樣的：

但是，如果我在下拉菜單中單擊按鈕，他們的名單不可見。如果我在我的組件中的其他地方使用相同的代碼，它正常工作。

我沒有得到任何錯誤信息和引導正確裝入（所有其他組件也可以）。這有什麼問題？

來源

2016-12-15 Asqan

我記得，引導下拉框使用jQuery插件，你必須通過調用

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

與Angular2會發生什麼來初始化所有的下拉菜單，並專門與*ngIf是角度再現的內容（你的情況<div class="dropdown">）每次條件改變（你可以看到當條件不是true整個內部HTML部分從頁面消失）。即使你加載的頁面內容不存在，並在稍後創建......也就是說，在你的情況下，初始化發生在呈現網格下拉之前。

所以我假設你有您的每一次col.type改爲初始化引導下拉。

或者你可以嘗試綁定到<div [hidden]="col.type == 'dropdown'">財產，而不是...但還是下拉初始化必須建立在的ngAfterViewInit，ngAfterContentInit，ngAfterContentChecked，包含這些元素組成的ngAfterViewChecked生命週期掛鉤......

一個完成

無論如何，我會建議你使用現有的Angular2-下拉庫，而不是一個......

來源

2016-12-15 17:21:21

'下拉（）'功能解決了這個問題。我在考慮應該綁定哪個生命週期鉤子，但不確定。目前，你已經在'ngDoCheck'函數中使用了'dropdown（）'函數，它解決了這個問題，但現在問題在於它的效率如何？你能提供一些信息嗎？你可以編輯你的答案，因爲它爲我工作，這樣我就可以接受你的問題。謝謝！ – Asqan

我完全同意你應該考慮現有的下拉解決方案，因爲最後你會重新發明輪子。 –

這個jQuery函數的問題在於，它通過頁面上提供的css選擇器將'onclick'綁定到所有項目。您可以通過給每個下拉分配唯一ID避免它...或者重新初始化Selectboxes只有當行的列表改變...更好的解決方案將寫選擇框指令，然後使用'ViewChild'綁定'下拉（）'直接指令模板... –

有一個叫ng2-bootstrap插件，它是由angular-ui團隊開發。
所以我認爲這是更好地使用它比jQuery污染angular2生態系統。
這裏是你說的link

來源

2016-12-15 18:33:59

不錯的建議，打我一拳大聲笑+1我也推薦這個方法@Anoop – Bean0341

引導下拉列表中BS網格不打開在角2

回答

相關問題