Question

我有一个自举网格，在某些单元格中应该显示一个bootstrap的下拉组件。这是代码：

<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

我记得，Bootstrap Dropdowns使用JQuery插件，您必须通过调用

来初始化所有下拉列表

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

Angular2，特别是*ngIf会发生什么，Angular会在每次条件更改时重新创建内容（在您的情况下为<div class="dropdown">）（当条件不是true时，您可以看到内部HTML部分已从页面中消失）。即使你加载页面内容不存在并且稍后创建...即。在你的情况下，初始化发生在网格下拉列表呈现之前。

因此，我假设每次col.type更改时都必须初始化Bootstrap下拉列表。

或者您可以尝试绑定到<div [hidden]="col.type == 'dropdown'">属性...但仍然必须在ngAfterViewInit，ngAfterContentInit，ngAfterContentChecked之一上执行Dropdown Init， ngAfterViewChecked包含这些元素的组件的生命周期钩子......

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

Answer 2

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

Bootstrap下拉列表未在Angular 2中的bs网格中打开

2 个答案: