Fatal编程技术网

Twitter bootstrap 引导下拉列表未在2的bs网格中打开

twitter-bootstrap angular twitter-bootstrap-3 drop-down-menu

Twitter bootstrap 引导下拉列表未在2的bs网格中打开,twitter-bootstrap,angular,twitter-bootstrap-3,drop-down-menu,Twitter Bootstrap,Angular,Twitter Bootstrap 3,Drop Down Menu,我有一个引导网格，在一些单元格中应该显示引导的下拉组件。代码如下： <div class="table-responsive"> <table class="table"> <thead> ... </thead> <tbody> <tr *ngFor="let item of data">

我有一个引导网格，在一些单元格中应该显示引导的下拉组件。代码如下：

<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
的情况是，Angular每次条件改变时都会重新创建内容（在您的情况下，
）（您可以看到，当条件不为
真时，
整个内部HTML部分从页面中消失）。即使您加载的页面内容不存在且稍后创建。。。即，在您的情况下，初始化发生在网格下拉列表呈现之前

所以我假设每次更改
col.type
时都必须初始化引导下拉列表

或者您可以尝试绑定到
属性来代替。。。但仍然必须在包含这些元素的组件的
ngAfterViewInit
，
ngAfterContentInit
，
ngAfterContentChecked
，
ngAfterViewChecked
生命周期挂钩之一上执行下拉初始化

无论如何，我建议您使用一个现有的Angular2下拉列表库…

我记得，引导下拉列表使用JQuery插件，您必须通过调用

$('.dropdown-toggle').dropdown()
Angular2，特别是
*ngIf
的情况是，Angular每次条件改变时都会重新创建内容（在您的情况下，
）（您可以看到，当条件不为
真时，
整个内部HTML部分从页面中消失）。即使您加载的页面内容不存在且稍后创建。。。即，在您的情况下，初始化发生在网格下拉列表呈现之前

所以我假设每次更改
col.type
时都必须初始化引导下拉列表

或者您可以尝试绑定到
属性来代替。。。但仍然必须在包含这些元素的组件的
ngAfterViewInit
，
ngAfterContentInit
，
ngAfterContentChecked
，
ngAfterViewChecked
生命周期挂钩之一上执行下拉初始化

无论如何，我建议您使用一个现有的Angular2下拉库…

有一个名为
ng2 bootstrap
的插件，由
AngularUI
团队开发。
因此，我认为与其用
jQuery

这是有一个名为
ng2 bootstrap
的插件，由
angular ui
团队开发。
因此，我认为与其用
jQuery

这是一个很好的建议，比我强一点，我还推荐@Anoopgood suggestion这个方法，比我强一点，我还推荐@Anoop
dropdown（）这个方法。
函数解决了你说的问题。我在考虑它应该绑定在哪个生命周期挂钩上，但不确定。目前，你已经在
ngDoCheck
函数中使用了
dropdown（）
函数，它解决了这个问题，但现在的问题是它的效率有多高？你能提供一些信息吗？你可以编辑你的答案，因为它对我有用，这样我就可以接受你的问题。谢谢我完全同意你应该考虑下拉的现有解决方案，因为最终你会重新发明轮子。这个jQuery函数的问题是它将代码> OnCutter < /代码>绑定到页面上提供的CSS选择器的所有项目。您可以通过为每个下拉列表指定唯一的ID来避免它。。。或仅在行列表更改时重新初始化选择框。。。更好的解决方案是为selectbox编写指令，然后使用
ViewChild
将
dropdown（）
直接绑定到指令模板…
dropdown（）
函数解决了您所说的问题。我在考虑它应该绑定在哪个生命周期挂钩上，但不确定。目前，你已经在
ngDoCheck
函数中使用了
dropdown（）
函数，它解决了这个问题，但现在的问题是它的效率有多高？你能提供一些信息吗？你可以编辑你的答案，因为它对我有用，这样我就可以接受你的问题。谢谢我完全同意你应该考虑下拉的现有解决方案，因为最终你会重新发明轮子。这个jQuery函数的问题是它将代码> OnCutter < /代码>绑定到页面上提供的CSS选择器的所有项目。您可以通过为每个下拉列表指定唯一的ID来避免它。。。或仅在行列表更改时重新初始化选择框。。。更好的解决方案是为selectbox编写指令，然后使用
ViewChild
将
下拉列表（）直接绑定到指令模板。。。