Html 5 data- * syntax cannot bind value in angular 2?

Question

I have an array of objects like this

Heros=[{
  heroName:"card1",
  heroType:"type1",
  heroHtml:"<p>card 1</p>"
}, 
{
  heroName:"card2",
  heroType:"type2",
  heroHtml:"<p>card 2</p>"
}
]

and I want to display it on my html page for example

<div *ng-for="#hero of heros" data-hero-type="hero.heroType" [inner-html]="hero.heroHtml"></div>

here you can see Plunker .

why cannot the data-data type get the correct value? If it is forbidden or not recommended, what other solution can be used to bind the value to the html 5 user attribute?

Answer 1

This is because it is data-hero-typenot a property of a div, but an attribute, so you must use

[attr.data-hero-type]="hero.heroType"

See this issue for reference # 5014

And you are good to go;)