css - 如何使用 Angular 2+ 绑定(bind)到数据属性？

Question

我正在使用我在网上找到的主要使用 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;
  }
}

Answer 1

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