能否将Angular属性值绑定到HTML模板元素的data属性？

你用data-name="{{name}}"的写法触发了错误，原因是Angular会把这个语法误判为要绑定h1元素的name属性，但h1本身不存在这个原生属性。要正确绑定data属性，需使用Angular的属性绑定语法，通过attr.前缀指定绑定HTML属性：

<h1 [attr.data-name]="name">Hello from {{ name }}!</h1>

关键说明 #

• 对于HTML标准属性（如id、class），可直接用[属性名]="值"绑定；
• 对于自定义属性（包括data-*这类自定义数据属性），必须添加attr.前缀，明确告知Angular要操作的是元素的HTML属性，而非DOM对象的内置属性。

另外要确保组件类中已正确定义name属性：

export class AppComponent {
  name = '你的值';
}

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