如何绑定到 Angular 中的数据检查和数据未检查

Question

我有一个切换开关，它使用 data-checked 和 data-unchecked html 属性决定将什么文本放入 div。

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

我基本上想做的是根据用户选择的语言将内容放入我的切换开关中。（就像我为休息所做的那样）

这段代码工作正常：

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

但是当我想像这样绑定数据检查和数据未检查时：

    <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 }}"

如何绑定到 Angular 中的数据检查和数据未检查

How to bind to data-checked and data-unchecked in Angular

html

angular

typescript

property-binding