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

Question

我想编写一个组件，它基本上根据输入显示不同的图标。图标框架期望它采用以下格式：

$nbr_CD3p   

group1 group2        p.value

1    SKG Balb/c 0.000001849548

$nbr_DN_CD69nCD25n  

group1 group2   p.value 

1    SKG Balb/c 0.6295371

所以 <span class="icon icon-generic" data-icon="B"></span> 基本上描述了要显示的图标。我想动态传递这个符号。类似的东西：

data-icon="B"

但这似乎不起作用。 ： - /有没有办法在我的Component类中创建html并将其附加到html？

Answer 1

属性绑定需要attr.前缀

attr.data-icon={{symbol}}

Answer 2

使用

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