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自定义属性？

- Garry

Answer 1

那是因为data-hero-type不是div的属性，而是一个属性，所以要使它起作用，你必须使用。

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

请参考此问题#5014

然后你就可以开始了 ;)

- Eric Martinez