値を動的に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.data-icon={{symbol}} 

Answer 2

attr.プレフィックスを必要とする利用

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