Angular ng-select在表格行中下拉列表溢出问题的修复咨询

问题原因 #

外层容器设置了overflow-y: auto，当前ng-select通过appendTo=".form-group"将下拉列表挂载在表格行内的小容器中，导致下拉被滚动容器的overflow规则截断，无法完整显示。

解决方案 #

• 修改appendTo挂载目标
  把下拉列表挂载到body元素下，脱离原滚动容器的约束，这是最直接有效的方法：
  将ng-select的appendTo=".form-group"改为appendTo="body"，修改后的代码如下：

  <ng-select id="ngSelectState" class="mat-outline custom" 
             [multiple]="false" [items]="itemList"
             bindLabel="Value" bindValue="Text" [(ngModel)]="item.ItemId" 
             floatingLabel appendTo="body" [ngModelOptions]="{standalone: true}">
  </ng-select>
  

• 调整下拉定位（可选）
  挂载到body后如果出现位置偏移，可以添加自定义CSS修正：

  .ng-select.custom .ng-dropdown-panel {
    position: fixed !important;
  }
  

  也可以通过dropdownPosition属性指定下拉方向，比如dropdownPosition="top"，避免下拉被视窗底部截断。

• 容器样式调整方案（备选）
  若不想挂载到body，可以尝试给外层滚动容器添加overflow-anchor: none，同时移除父容器的position: relative属性，但这种方式兼容性不如第一种方案，仅在特定场景有效。

内容的提问来源于stack exchange，提问作者Onesimus Chandra Pradhan