Question

我正在使用我在网上找到的主要使用css创建的数据表。在其中一列中有一个css数据属性＆＃34; data-title＆＃34;这是一个字符串。

<td data-title="someString">

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

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

只显示文字＆＃39; object.someString＆＃39;我试过了

<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属性，并且data-title没有DOM属性（似乎Angular2还不够聪明，不能使用dataset - 除非我遗漏了什么。）

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

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

或者：

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

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

1 个答案: