Angular 不支持通过插值语法 {{}} 直接绑定自定义 data 属性，必须使用属性绑定语法 [attr.data-*] 才能动态设置 data 属性值。
angular 不支持通过插值语法 `{{}}` 直接绑定自定义 data 属性，必须使用属性绑定语法 `[attr.data-*]` 才能动态设置 data 属性值。
在 Angular 模板中，HTML 原生属性（如 `id`、`class`、`src`）可通过 `[property]="value"` 绑定，但自定义 `data-*` 属性不属于标准 DOM 属性，Angular 无法识别为可绑定属性——因此 `
` 会触发错误：`Can't bind to 'name' since it isn't a known property of 'h1'`。该错误本质是 Angular 尝试将 `data-name` 解析为组件的输入属性（`@Input()`），而非 HTML 特性（attribute）。
✅ 正确做法是使用 属性绑定语法 + attr. 前缀，显式告知 Angular 将值设置为元素的 HTML attribute：
<h1>Hello from {{ name }}!</h1>
此时若组件类中定义 name = 'Angular'，渲染结果为：
<h1 data-name="Angular">Hello from Angular!</h1>
⚠️ 注意事项：
- 不要写成 [data-name]="name"（缺少 attr. 前缀），这会导致 Angular 查找名为 dataName 的输入属性，报错；
- 插值 {{ }} 在 attribute 位置无效（如 data-name="{{name}}"），仅适用于文本节点或已知属性；
- attr. 绑定支持所有合法 HTML attribute，包括 data-*、aria-*、role 等；
- 若需绑定布尔型 data 属性（如 data-active="true"），仍用字符串赋值：[attr.data-active]="isActive ? 'true' : 'false'"，或更推荐语义化写法 [attr.data-active]="isActive.toString()"。
? 补充：对于多个 data 属性，可链式书写：
<div date:>
{{ item.title }}
</div>
总结：Angular 中动态设置 data-* 属性的唯一可靠方式是 [attr.data-xxx]="expression"。这是框架对 HTML attribute 与 DOM property 明确区分的设计体现，掌握 attr. 前缀是编写健壮、可维护模板的关键基础。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
