我正在使用我在网上找到的主要使用 css 创建的数据表。在其中一列中有一个 css 数据属性“data-title”,它被分配了一个字符串。
<td data-title="someString">
当我输入字符串时,列内的样式按预期工作。当我尝试绑定(bind)到一个对象字符串时,绑定(bind)并没有像我预期的那样工作。我试过了
<td data-title="object.someString">
它只显示文字“object.someString”,我试过了
<td data-title="{{object.someString}}">
什么都不显示(空白)。知道为什么我的绑定(bind)在这里不起作用吗?
CSS:
.responsive-table tbody td[data-title]:before {
content: attr(data-title);
float: left;
font-size: .9em;
color: #565248;
}
@media (min-width: 48em) {
.responsive-table tbody td[data-title]:before {
content: none;
}
}
最佳答案
Angular 2 不使用更简单的 {{ }}
语法绑定(bind)到 data-
属性,因为它试图将它们映射到 DOM 属性,但没有data-title
的 DOM 属性(Angular2 似乎还不够智能,无法使用 dataset
- 除非我遗漏了什么)。
因此,要绑定(bind)到 data-
属性,您需要使用 attr.data-title={{}}
或 [attr.data-.. .]=""
语法。请参阅此质量检查:Angular 2 data attributes
<td [attr.data-title]="object.someString">
或者:
<td attr.data-title="{{object.someString}}">
关于css - 如何使用 Angular 2+ 绑定(bind)到数据属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46064873/