Angular环境配置依赖安装报错及grid数据缺失问题求助

问题1：依赖安装冲突导致Grid数据缺失 #

报错核心原因 #

执行npm install时出现依赖版本冲突：ngx-ui-loader@13.0.0要求的peer依赖@angular/common@^13.0.0，与当前项目使用的@angular/common@14.2.12版本不兼容，导致依赖安装不完整，最终引发Grid数据缺失。

解决办法 #

• 临时兼容方案：执行 npm install --legacy-peer-deps，跳过peer依赖冲突检查，快速完成依赖安装
• 版本匹配方案：修改package.json中ngx-ui-loader的版本为^14.0.0（适配Angular 14的版本），再重新执行npm install
• 降级适配方案：若项目允许，将Angular核心包降级至13.x版本，匹配ngx-ui-loader@13的依赖要求

问题2：Cannot read properties of undefined (reading 'filter') #

报错核心原因 #

代码中调用this.gridData.filter()时，this.gridData未初始化、为undefined，导致无法调用数组方法。

解决办法 #

• 初始化默认值：在组件类中给gridData设置初始空数组：

  gridData: any[] = [];
  

• 代码安全校验：在调用filter前添加安全判断，使用安全导航操作符?.：

  this.gridData?.filter(item => /* 你的过滤逻辑 */);
  

• 数据来源校验：如果gridData来自接口请求，确保请求成功后再赋值给变量，同时添加接口异常处理，避免因请求失败导致数据未初始化

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