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

9

我正在使用一种主要由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;
  }
}

请发布相关的 CSS。它是否使用了 td::before { content: attr('data-title'); } 属性和函数? - Dai
@Dai 使用相关的CSS进行了编辑。 - Kevin Quiring
请撤销您的编辑,该编辑错误地将属性称为“CSS选择器属性”。 data-属性不是“CSS选择器属性”。 CSS选择器可以使用任何元素属性。 - Dai
明白了。更改为数据属性。 - Kevin Quiring
1个回答

26

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

这对我来说完全有效!谢谢! - Alberto De Francisco Martín
我能否将一个函数绑定到data-*属性上?我已经尝试过了,但它就是不起作用。 - Devmaleeq

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接