Angular中如何给div标签的data-countdown属性动态绑定值

报错原因 #

Angular 默认将方括号绑定的目标识别为DOM元素的原生属性，div本身不存在data-countdown这个原生DOM属性，因此触发编译错误。要绑定自定义data-*类HTML属性，需要添加attr.前缀，明确告知Angular你要绑定的是HTML属性而非DOM原生属性。

正确写法 #

你可以选择以下任意一种写法，均不需要修改组件TS逻辑，也不会改动原有HTML结构，渲染后会自动生成符合要求的data-countdown属性，完全兼容你现有的自定义JS逻辑：

• 方括号属性绑定写法

<div [attr.data-countdown]="dateValue"></div>

• 插值绑定写法

<div attr.data-countdown="{{dateValue}}"></div>

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