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

Question

我正在使用我在网上找到的主要使用css创建的数据表.在其中一列中有一个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-...]=""语法的属性.请参阅此QA:Angular 2数据属性

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

要么:

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