將值動態傳遞給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>