时间戳

首页 > 解决方案 > Angular 5.2.3 数据绑定到名称中带有连字符的数据属性

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

问题描述

使用 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'"

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

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

感谢您的任何见解。

标签： angulardata-bindingcustom-data-attribute

解决方案

我为您创建了一个最小的 StackBlitz 示例。

主要收获：您可能误解了日期管道的文档。 

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

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

推荐阅读