Ng-select内部对话框添加额外的隐藏高度

Question

在对话框中使用ng-select时，下拉菜单的内容不会显示在溢出的对话框外。我在github上也看到了这个问题，但没有找到解决方案。

https://github.com/ng-select/ng-select/issues/240

演示：https://stackblitz.com/edit/angular-material2-issue-yesgfz

我该如何解决这个问题？

预期行为：

实际行为：

来自github的解决方案[appendTo] =＆＃34;＆＃39; body＆＃39;＆＃34;

Answer 1

在ng-select标签上粘贴appendTo =“ body”

<ng-select appendTo="body" [items]="data" bindLabel="name" bindValue="id" placeholder=""></ng-select>

Answer 2

你可以，即使它可能不理想，也可以这样做

<div style="display: block; height: 40px;">
  <ng-select [searchable]="false" style="position: absolute; width: 200px;">
    <ng-option *ngFor="let option of options" [value]="option">
      {{ option }}
    </ng-option>
  </ng-select>
</div>

需要一些固定值，但是绝对位置可以解决你的问题，并且用css摆弄一下可能会以合适的方式为你提供你想要的结果。

修改：Stackblitz link

Answer 3

你只需要在 ng-select 标签中添加 appendTo="body" 就这样

<ng-select [searchable]="true" formControlName="Currency" [selectOnTab]="true" appendTo="body">