Angular2项目中使用PrimeNG Tree组件报错的问题求助

看起来你遇到的是PrimeNG Tree组件输入属性不被识别的问题，结合你的代码和报错信息，我整理了几个针对性的解决方案：

1. 确认PrimeNG与Angular版本的兼容性 #

Angular 2对应的PrimeNG版本是2.x或3.x，如果你安装的是较新的PrimeNG版本（比如4.x及以上），这些版本需要Angular 4+支持，会导致属性名不匹配——新版本Tree组件用[nodes]替代了旧版本的[value]。

• 检查你的package.json里的primeng版本，如果版本过高，执行降级命令：

  npm install primeng@2.0.1 --save
  

  （版本号可根据Angular2的兼容情况调整，2.x或3.x均可）

2. 匹配模板属性名与PrimeNG版本 #

如果你确认PrimeNG版本适配Angular2，模板中应该使用[value]；如果不小心安装了高版本，则需要把模板中的[value]改为[nodes]：

• 适配Angular2的旧版本模板写法：

  <p-tree [value]="yourTreeData"></p-tree>
  

• 新版本PrimeNG模板写法：

  <p-tree [nodes]="yourTreeData"></p-tree>
  

3. 再次核对模块导入的正确性 #

虽然你的代码里已经在AppModuleShared的imports数组中添加了TreeModule，但还是要确保：

• TreeModule确实从primeng/primeng正确导入（旧版本PrimeNG的导入路径是这个，新版本可能是primeng/tree）
• ProductTreeComponent已经在模块的declarations数组中注册（你的代码里已经做到了，这一步可以再快速核对下）

4. 清理缓存并重启项目 #

有时候缓存会导致模块导入不生效，执行以下步骤：

• 删除node_modules文件夹和package-lock.json文件
• 重新执行npm install
• 重启Angular开发服务器

如果以上步骤都尝试后还是有问题，可以把你的ProductTreeComponent的模板代码贴出来，方便进一步排查。

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