如何在Angular中绑定data-checked和data-unchecked

Question

我有一个切换开关，决定使用data-checked和data-uncheckedhtml属性在div中放入什么文本。

我也有一个Angular管道，它使用网站语言翻译网站的所有文本。

我想做的基本上是根据用户选择的语言在切换开关中放置内容。(就像我为其余的人做的那样)

下面的代码运行正常:

<div
class="can-toggle__switch"
data-checked="USDT"
data-unchecked="IRT"
></div>

但是当我想绑定data-checked和data-unchecked时，像这样:

<div
class="can-toggle__switch"
[data-checked]="{{ firstItemText | translate }}"
[data-unchecked]="{{ secondItemText | translate }}"
></div>

我得到以下错误:

Can't bind to 'data-checked' since it isn't a known property of 'div'.

Answer 1

您需要在数据绑定中添加以下前缀:

[attr.data-checked]="{{ firstItemText | translate }}"
[attr.data-unchecked]="{{ secondItemText | translate }}"