如何用PrimeNG Checkbox实现Angular中Div的显示与隐藏？

DevOps 小满

2026-8-4

解决Angular中PrimeNG Checkbox控制Div显示隐藏的问题

核心结论

不需要额外使用(onChange)事件，你的双向绑定逻辑本身是成立的，问题大概率出在模块未正确导入或者模板语法细节上。

问题排查与修正步骤

必须导入依赖模块
要让PrimeNG Checkbox和[(ngModel)]正常工作，需要在组件所属的NgModule（比如AppModule或对应FeatureModule）中导入两个关键模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // [(ngModel)]依赖该模块
import { CheckboxModule } from 'primeng/checkbox'; // PrimeNG Checkbox模块

import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [HomeComponent],
  imports: [BrowserModule, FormsModule, CheckboxModule],
  bootstrap: [HomeComponent]
})
export class AppModule { }

修正模板引号问题
你的模板代码里用了转义的"，实际编写时要替换为普通的双引号或单引号：

<!-- home.component.html 修正后 -->
<p-checkbox [(ngModel)]="showMe" [binary]="true"></p-checkbox>

<div *ngIf="showMe"> example </div>

组件代码无需修改
你的home.component.ts代码是正确的，保持即可：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {
  showMe: boolean = false;

  ngOnInit(): void { }
}