Primeng 14.1.2导入ToggleButtonModule后切换按钮不显示且无报错

针对已导入ToggleButtonModule但<p-toggleButton>组件无法显示且无控制台报错的情况，可按以下步骤排查：

• 确认使用组件的声明状态
  检查使用<p-toggleButton>的组件是否已添加到当前ResultadoImoveisResidenciaisVendaModule的declarations数组中。如果组件属于该模块，必须显式声明：

  @NgModule({
    declarations: [YourComponent], // 替换为实际使用ToggleButton的组件名
    imports: [
      // ... 已有的导入模块
      ToggleButtonModule
    ]
  })
  

  若组件来自CoreModule，需确保CoreModule已将该组件导出，否则当前模块无法访问该组件。

• 验证ngModel绑定变量
  模板中使用[(ngModel)]="val"，需在组件类中正确定义带初始值的布尔变量：

  val: boolean = false; // 或设置为true，ToggleButton依赖布尔值绑定
  

  未初始化变量可能导致组件无法正常渲染。

• 检查PrimeNG样式是否引入
  PrimeNG组件需要对应样式文件才能显示UI，确认已在项目中引入样式：
  在styles.scss中添加：

  @import "primeng/resources/themes/lara-light-blue/theme.css";
  @import "primeng/resources/primeng.min.css";
  

  或在angular.json的styles数组中配置对应样式路径。

• 确认模块的层级导入
  检查ResultadoImoveisResidenciaisVendaModule是否被上层模块（如AppModule）正确导入；若为懒加载模块，需确认路由配置中正确关联该模块。

• 检查模板语法正确性
  确保实际模板文件中使用的是原生HTML标签<p-toggleButton [(ngModel)]="val"></p-toggleButton>，而非转义后的<p-toggleButton>。

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