
当 PrimeNG 的 pInputTextarea 绑定的 [value] 为 undefined 时,占位符(placeholder)不会显示,而是直接渲染 "undefined" 字符串;将其改为返回 null 或空字符串 '' 即可正确触发 placeholder 渲染。
当 primeng 的 `pinputtextarea` 绑定的 `[value]` 为 `undefined` 时,占位符(placeholder)不会显示,而是直接渲染 "undefined" 字符串;将其改为返回 `null` 或空字符串 `''` 即可正确触发 placeholder 渲染。
在 PrimeNG 中,pInputTextarea 组件遵循 Angular 表单控件的值处理逻辑:只有当绑定值为 null 或 undefined 时,placeholder 才应生效。但实际行为中,Angular 模板对 undefined 的插值会转换为字符串 "undefined",导致 <textarea> 内容被设为该文本,从而覆盖 placeholder。
关键在于——[value] 输入属性必须严格为 null(或 ''),而非 undefined。因为 PrimeNG 内部通过 value == null 判断是否启用 placeholder,而 undefined == null 为 true,但若模板中使用插值表达式(如 {{ showSomething(person) }})或未正确绑定,undefined 可能被隐式转为字符串。
✅ 正确做法:在数据处理函数中主动返回 null 或 '':
showSomething(person: Person): string | null {
if (!person || !person.name || !person.surname) {
return null; // ✅ 触发 placeholder
}
return `${person.name} ${person.surname}`;
}模板中需使用属性绑定(非插值),确保值类型准确:
<p-inputTextarea [value]="showSomething(person)" placeholder="请输入姓名信息" readonly> </p-inputTextarea>
⚠️ 注意事项:
- 避免使用插值语法 <p-inputTextarea>{{ showSomething(person) }}</p-inputTextarea>,这会导致 undefined 被转为字符串;
- null 和 '' 均可触发 placeholder,但 null 语义更清晰(表示“无值”);
- 若使用响应式表单,建议统一用 FormControl 管理值,并在初始化时设为 null;
- Angular 14+ 中,strictNullChecks 开启时,显式返回 null 还有助于类型安全。
总结:Placeholder 的显示依赖于 value 属性的运行时真实值,而非模板表达式的原始返回类型。务必确保传入 pInputTextarea 的 [value] 是 null 或空字符串,而非 undefined —— 这是 PrimeNG 占位符机制正常工作的前提。

















