将值动态传递给data- *属性[Angular2]

Question

我想编写一个组件，它基于其输入显示不同的图标。图标框架期待它的格式如下：

<span class="icon icon-generic" data-icon="B"></span> 

所以data-icon="B"描述基本上是一个图标来显示。我想动态地传递这个符号。例如：

<span class="icon icon-generic" data-icon={{symbol}}></span> 

但这似乎不起作用。 ： - /有没有办法做到这一点，而不是在我的组件类中创建HTML并将其附加到HTML？

Answer 1

属性绑定需要attr.前缀

attr.data-icon={{symbol}} 

Answer 2

使用

<span class="icon icon-generic" [attr.data-icon]='symbol'></span>