PrimeNG 14.1.2版本p-inplace组件content与display模板不显示求助

我正在使用PrimeNG版本14.1.2的p-inplace组件，但content和display对应的ng-template中的内容均无法显示。

以下是针对性的解决方案：

• 确认模块导入正确
  在你的功能模块（如AppModule）中，必须导入InplaceModule并添加到imports数组：

  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { InplaceModule } from 'primeng/inplace'; // 导入Inplace模块
  import { AppComponent } from './app.component';
  
  @NgModule({
    imports: [BrowserModule, InplaceModule], // 添加到imports列表
    declarations: [AppComponent],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• 检查模板语法正确性
  确保ng-template使用正确的pTemplate指令绑定，指定display和content类型，避免拼写或语法错误：

  <p-inplace>
    <!-- 显示状态模板 -->
    <ng-template pTemplate="display">
      点击此处编辑
    </ng-template>
    <!-- 编辑状态模板 -->
    <ng-template pTemplate="content">
      <div>
        <input type="text" placeholder="输入内容" />
        <button>保存</button>
      </div>
    </ng-template>
  </p-inplace>
  

• 验证样式资源是否引入
  在angular.json的styles数组中，确保包含PrimeNG的主题样式、核心样式以及PrimeIcons，缺失样式可能导致组件渲染异常：

  "styles": [
    "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
    "node_modules/primeng/resources/primeng.min.css",
    "node_modules/primeicons/primeicons.css",
    "src/styles.css"
  ]
  

• 确认版本兼容性
  PrimeNG 14.1.2需要搭配Angular 14.x版本使用，检查你的项目Angular版本是否匹配，版本不兼容会导致组件功能异常。

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