Angular : 属性 绑定到 div 标签

Question

我有一个自定义 JS 文件，它在 div 标签上显示倒计时栏。 这是 html 代码：

Component.html

<div data-countdown="2021-11-05"></div>

在我的组件中，为简单起见，我有一个日期值，假设它如下所示：

Component.ts

dateValue : any = '2021-08-08'

我希望将此 dateValue 绑定到 data-countdown 的 html 属性值。

虽然在尝试这个时 :

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

或这个

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

我收到一个编译错误：

cannot bind to 'data-countdown' since it is a known property of 'div'.

我想保持相同的 html 编码，而不是在我的组件中调用 js 逻辑，有什么方法可以将动态值传递给 div 标记的数据倒计时？

Answer 1

使用属性。那么您的特定属性应该与 div.

一起使用

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

Answer 2

要使用属性绑定，试试这个：

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

或

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