我们正在把一个Angular应用从16升级到21。作为升级的一部分，我们在更新一些使用 ng-select 字段的表单时遇到问题，这些字段位于 MatDialog 内。

以前我们在对话框中的表单字段的设置如下：

<ng-select ngSelectMat
   appendTo="body"
   [items]="data.addressTypes"
   [searchable]=false
   bindLabel="name"
   bindValue="id">
</ng-select>

其中在组件中将 data 定义为：

constructor(@Inject(MAT_DIALOG_DATA) public data: { addressTypes: IAddressTypeDto[] }) {
}

无论是继续使用构造函数，还是切换到一个 inject，如下所示，ng-select 都不会被 MAT_DIALOG_DATA 提供的项数组填充。

  data = inject<{
    addressTypes: IAddressTypeDto[];
  }>(MAT_DIALOG_DATA);

ng-selects在其他组件中，如果不通过 MAT_DIALOG_DATA 传递数据，仍然按预期工作。

将 {{ data.addressTypes | json }} 添加到显示中，在 console.log() 中进行 ngOnInit()，并切换到一个 mat-select，遍历 data.addressTypes，这表明数据正在被填充。

在使用 MatDialog 时，是否需要以不同的方式注入或绑定 ng-select 项？

解决方案

似乎问题并不出在 MAT_DIALOG_DATA 或绑定问题。数据被正确传递。

问题在于Angular 21 + CDK变更导致的覆盖层叠加，特别是对于 appendTo="body"，会把下拉菜单渲染在MatDialog的后面。

为避免纠结变更检测修复的问题，要么移除appendTo="body"，要么像 OVERLAY_DEFAULT_CONFIG 那样调整CDK overlay的配置。