我正在尝试使用Angular创建引导程序模态,该模态具有ngx-chips模块的标签输入。 标签输入具有自动完成功能,该功能可以将数据数组显示为下拉列表。
我要面对的是e下拉列表位于模态后面而不是模态顶部。因此,显示的值不可单击。当我尝试使用inspect元素向其中添加css时,无法添加它们,因为如果单击浏览器屏幕上的其他任何位置,下拉列表就会消失。
我需要能够在引导程序模式的顶部显示下拉菜单。请让我知道是否有人可以帮助我解决这个问题。
这是我的模态代码,并使用角度boostrap下拉菜单,
<ng-template #contentone let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Select Skill</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<tag-input [(ngModel)]="searchText" name="srch-term" id="srch-term" placeholder="Search">
<tag-input-dropdown [autocompleteItems]="listofdata"></tag-input-dropdown>
</tag-input>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="open(content)">Search</button>
</div>
</ng-template>
这是渲染的模式和下拉列表