引导下拉列表中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>

并证明这样的：

但是，如果我在下拉菜单中单击按钮，他们的名单不可见。如果我在我的组件中的其他地方使用相同的代码，它正常工作。

我没有得到任何错误信息和引导正确装入（所有其他组件也可以）。这有什么问题？

答

我记得，引导下拉框使用jQuery插件，你必须通过调用

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

与Angular2会发生什么来初始化所有的下拉菜单，并专门与*ngIf是角度再现的内容（你的情况<div class="dropdown">）每次条件改变（你可以看到当条件不是true整个内部HTML部分从页面消失）。即使你加载的页面内容不存在，并在稍后创建......也就是说，在你的情况下，初始化发生在呈现网格下拉之前。

所以我假设你有您的每一次col.type改为初始化引导下拉。

或者你可以尝试绑定到<div [hidden]="col.type == 'dropdown'">财产，而不是...但还是下拉初始化必须建立在的ngAfterViewInit，ngAfterContentInit，ngAfterContentChecked，包含这些元素组成的ngAfterViewChecked生命周期挂钩......

一个完成

无论如何，我会建议你使用现有的Angular2-下拉库，而不是一个......

'下拉（）'功能解决了这个问题。我在考虑应该绑定哪个生命周期钩子，但不确定。目前，你已经在'ngDoCheck'函数中使用了'dropdown（）'函数，它解决了这个问题，但现在问题在于它的效率如何？你能提供一些信息吗？你可以编辑你的答案，因为它为我工作，这样我就可以接受你的问题。谢谢！ – Asqan

我完全同意你应该考虑现有的下拉解决方案，因为最后你会重新发明轮子。 –

这个jQuery函数的问题在于，它通过页面上提供的css选择器将'onclick'绑定到所有项目。您可以通过给每个下拉分配唯一ID避免它...或者重新初始化Selectboxes只有当行的列表改变...更好的解决方案将写选择框指令，然后使用'ViewChild'绑定'下拉（）'直接指令模板... –

答

有一个叫ng2-bootstrap插件，它是由angular-ui团队开发。
所以我认为这是更好地使用它比jQuery污染angular2生态系统。
这里是你说的link

不错的建议，打我一拳大声笑+1我也推荐这个方法@Anoop – Bean0341

引导下拉列表中BS网格不打开在角2

相关推荐