Question

在自动填充下拉列表中显示的数据：

var entities = dbContext.Entity.OrderBy(e => e.Id).ToList();

foreach (var currentEntity in entities)
{
    // all other records except current...
    var allRecords = dbContext.Entity.Where(e => e.Id > currentEntity.Id).ToList();

    // do your compare stuff...
}

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

的用户界面模板代码

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>

在上面的模态对话框<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>  </div>  </div>无效。

Answer 1

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

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

Bootstrap模式默认使用1050的z-index。

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

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

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

如何将ng2-tag-input与自动完成下拉列表一起用于对象数组

1 个答案: