如何使用 Angular 2+ 绑定到数据属性？

Question

我正在使用我在网上找到的主要由 css 创建的数据 table。在其中一列中有一个 css 数据属性 "data-title" 分配了一个字符串。

<td data-title="someString">

当我输入字符串时，列内的样式按预期工作。当我尝试绑定到一个对象字符串时，绑定并没有像我预期的那样工作。我试过了

<td data-title="object.someString">

只显示文字 'object.someString' 我试过

<td data-title="{{object.someString}}">

什么都不显示（空白）。知道为什么我的绑定在这里不起作用吗？

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;
  }
}

Answer 1

Angular 2 不使用更简单的 {{ }} 语法绑定到 data- 属性，因为它试图将它们映射到 DOM 属性，并且没有DOM 属性用于 data-title（似乎 Angular2 还不够聪明，无法使用 dataset - 除非我遗漏了什么）。

因此，要绑定到 data- 属性，您需要使用 attr.data-title={{}} 或 [attr.data-...]="" 语法。请参阅此质量检查：

<td [attr.data-title]="object.someString">

或者：

<td attr.data-title="{{object.someString}}">

如何使用 Angular 2+ 绑定到数据属性？

How to bind to a data attribute using Angular 2+?

css

binding

angular2-template