html 5 data-* 语法无法绑定 angular 中的值 2？

Question

我有一个这样的对象数组

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

我想在我的 html 页面中显示它，像这样使用

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

这里可以看到一个Plunker

为什么data-component-type取不到正确的值？如果这是被禁止或不推荐的，还有什么解决方案可以用来将值绑定到 html 5 自定义属性？

Answer 1

那是因为 data-hero-type 不是 div 的属性，而是一个属性，因此要使其工作，您必须使用

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

参考这个问题#5014

你很高兴去;)

html 5 data-* 语法无法绑定 angular 中的值 2？

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

html

angular