0

在自动完成下拉列表中显示的数据：

users = [{"user_id":0,"name":"name1"},
         {"user_id":1,"name":"name2"},
         {"user_id":2,"name":"name3"}];

显示的 UI 模板代码ng2-tag-input 

<tag-input [ngModel]="selectedUsers" [onlyFromAutocomplete]="true">
    <tag-input-dropdown [showDropdownIfEmpty]="true" [autocompleteItems]="users" [identifyBy]="'user_id'" [displayBy]="'name'">
    </tag-input-dropdown>
</tag-input>

模态对话框的 UI 模板是：-

<div bsModal #largeModal="bs-modal" [config]="{backdrop: 'static'}" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-primary" role="document">
        <div class="modal-content">

            <div class="modal-body">
                <div class="meeting-form m-xl-1">
                    <div class="row">

                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for="name">Users</label>
                                <tag-input [(ngModel)]="selectedUsers" [onlyFromAutocomplete]="true">
                                    <tag-input-dropdown [showDropdownIfEmpty]="true" [autocompleteItems]="users" [identifyBy]="'user_id'" [displayBy]="'name'">
                                    </tag-input-dropdown>
                                </tag-input>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

在上面的模态对话框ng2-tag-input中不起作用。

4

1 回答 1

1

我遇到了同样的问题。问题的根本原因似乎是 z-index。

ng2-dropdown-menu（来自 ng2-material-dropdown）设置为使用 100 的 z-index。这可以在 ng2-dropdown.bundle.js 中看到

Bootstrap modals 默认使用 1050 的 z-index。

因此，自动完成弹出窗口可能正在显示，但显示在模式对话框下方。

我不确定这是否是最优雅的解决方案，但我能够通过将以下内容添加到我的 CSS 文件来解决此问题：

.ng2-dropdown-menu {
    z-index: 1051 !important;
}
于 2017-08-29T14:23:43.297 回答