ng-select 下拉列表位于其他元素后面

Question

我将ng-select与 Angular 4 和 Bootstrap 4 结合使用。

下拉菜单位于我的日期选择器（ng-bootstrap）后面。

我不知道如何解决这个问题。

Answer 1

我通过简单地添加appendTo="body"我的ng-select：

<ng-select appendTo="body" 
    [items]="nature_structure_recherches"
    placeholder="Nature"
    formControlName="nature"
    [multiple]="false">
</ng-select>

Answer 2

我能够通过覆盖下拉列表的 ng-select 的 z-index 来解决这个问题：

1）我将以下内容添加到组件的 scss 文件（即托管 ng-select 的组件）中：

ng-select select-dropdown > div {
    z-index: 2;
}

（我必须在 css 选择器中指定 ng-select 和 select-dropdown 以增加 css 特异性，以便它胜过 ng-select 的 css，至少我认为这就是原因）。

2) 我添加encapsulation: ViewEncapsulation.None到组件的装饰器中，因此它的 css 也适用于 ng-select 组件。