Angular 5.2.3 数据绑定到名称中带有连字符的数据属性

Question

使用 Angular 5.2.3.

据我了解这是有效的HTML

<div data-automation-for="howdy"></div>

但是当它尝试像这样绑定数据时

data-automation-for="{{day.date | dateFormat:'MMMM'}}"

我收到以下错误

Can't bind to 'automation-for' since it isn't a known property of 'div'. ("<div style="display: inline-block" [ERROR ->]data-automation-for="{{dateContext | dateFormat:'MMMM'}}">")

搜索后，我发现了以下两个可能的解决方案

attr.data-automation-for="{{day.date | dateFormat:'MMMM'}}"

和

[attr.data-automation-for]="day.date | dateFormat:'MMMM'"

然而他们都出错了。这些解决方案似乎没有处理额外的连字符。

现在我意识到我可能完全错了，额外的连字符无效，但我没有找到任何说明。

感谢您的任何见解。

Answer 1

我为你创建了一个minimal StackBlitz example。

要点：您可能误解了 the documentation of the date pipe.

<div [attr.data-automation-for]="dateContext | date:'MMMM'">

注意：插值（通过 {{varName}} 使用变量）仅在其他 HTML 标签之外使用。

Angular 5.2.3 数据绑定到名称中带有连字符的数据属性

Angular 5.2.3 data-bind to data attribute with hyphen in name

angular

data-binding

custom-data-attribute