Angular 11中Ng Select无法显示，报Cannot read Properties of null错误

以下是针对该问题的可能原因及解决步骤：

1. 样式导入路径解析问题 #

Angular 11 对 SCSS 里的 ~ 符号解析逻辑有调整，ng-select v6 的样式路径写法无需该符号。

• 解决步骤：
  修改 styles.scss 中的样式导入语句，去掉 ~：

  @import '@ng-select/ng-select/themes/default.theme.css';
  

2. RxJS 版本不兼容 #

Angular 11 要求 RxJS 版本为 ~6.6.0，若项目中 RxJS 版本过高（如 7.x），会与 ng-select v6 产生冲突。

• 解决步骤：
  1. 查看 package.json 中的 rxjs 版本，确认是否符合要求
  2. 若版本不符，执行命令降级：

     npm install rxjs@~6.6.0 --save
     

3. 未初始化绑定变量 #

selectedCar 仅声明但未初始化，ng-select v6 在处理未初始化的 ngModel 绑定值时可能触发 null 相关错误。

• 解决步骤：
  给 selectedCar 设置初始值，比如：

  selectedCar: number = 1; // 或设置为 undefined：selectedCar: number | undefined;
  

4. 模块导入不完整或顺序问题 #

ng-select 依赖 Angular 的 CommonModule，未导入会导致组件渲染失败；模块导入顺序也可能影响解析。

• 解决步骤：
  确保 AppModule 的 imports 数组中包含 CommonModule，且顺序正确：

  import { CommonModule } from '@angular/common';
  import { FormsModule } from '@angular/forms';
  import { NgSelectModule } from '@ng-select/ng-select';
  
  @NgModule({
    imports: [
      CommonModule,
      FormsModule,
      NgSelectModule,
      // 其他业务模块
    ]
  })
  export class AppModule { }
  

5. 缓存导致的依赖解析异常 #

Angular 缓存可能导致依赖文件解析错误，进而引发组件渲染问题。

• 解决步骤：
  执行以下命令清理缓存并重启服务：

  ng clean
  ng serve
  

内容的提问来源于stack exchange，提问作者KimiH