如何为对象数组使用带有自动完成下拉列表的NG2标记输入

Question

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

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

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

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

Modal Dialog的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无法工作。

Answer 1

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

NG2下拉菜单(来自NG2材料下拉菜单)被设置为使用z索引100。这可以在ng2-dropdown.bundle.js .bundle.js中看到

默认情况下，引导调制解调器使用的z索引为1050。

因此，自动完成弹出很可能正在显示，但显示在模态对话框下面。

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

.ng2-dropdown-menu {
    z-index: 1051 !important;
}