Angular中如何正确绑定data-checked与data-unchecked自定义属性？

错误原因 #

你遇到的报错是因为Angular默认使用方括号[]绑定的是DOM元素的内置属性，而data-checked、data-unchecked属于HTML自定义数据属性，并非div的原生DOM属性，因此Angular无法识别该绑定目标。
除此之外你的原有写法还存在语法问题：方括号绑定语法和{{}}插值语法不能同时使用，二者作用都是绑定动态值，混用会触发语法异常。

解决方案 #

有两种正确写法可选，都可以正常将翻译后的动态值写入对应的data属性，实现开关文本随语言切换的需求：

方法1：使用attr.前缀绑定自定义属性 #

在绑定的属性名前加attr.前缀，明确告知Angular你要绑定的是HTML Attribute而非DOM Property：

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

方法2：直接使用插值语法写在属性值位置 #

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

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