You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何为PrimeNG p-inputSwitch设置onLabel和offLabel开关文本

p-inputSwitch 配置开关状态文本的实现方法

PrimeNG 官方原生提供了对应配置项,无需自定义改造组件即可实现开启/关闭状态的自定义文本显示:

  • 开启(On)状态文本通过onLabel输入属性配置
  • 关闭(Off)状态文本通过offLabel输入属性配置

你原有代码存在一处小问题:onChange事件绑定多写了一个闭合右括号,会触发Angular模板语法报错,修正时一并处理即可。

添加对应配置后的完整代码如下:

<p-inputSwitch 
  [(ngModel)]="checked" 
  name="first-chk" 
  onLabel="Yes"
  offLabel="No"
  (onChange)="myFunction()">
</p-inputSwitch>

注意:onLabel和offLabel是InputSwitch组件的公开稳定API,v7及之后的所有PrimeNG正式版本均支持。如果配置后文本未正常展示,优先检查项目全局样式是否覆盖了组件默认的文本节点样式。

内容的提问来源于stack exchange,提问作者Aneesh Ajithkumar

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.19 16:15:45