如何使用Angular编写数据属性？

Question

我觉得我漏掉了什么。当我尝试在我的模板中使用一个 `data` 属性，就像这样：

<ol class="viewer-nav">
    <li *ngFor="#section of sections" data-sectionvalue="{{ section.value }}">
        {{ section.text }}
    </li>
</ol>

Angular 2崩溃并显示以下错误：

异常：模板解析错误：无法绑定到 'sectionvalue'，因为它不是已知的本地属性（"

]data-sectionvalue="{{ section.value }}">{{ section.text }}

显然，我在语法方面漏掉了一些东西，请帮忙解决。

- Serj Sagan

Answer 1

改用属性绑定语法

<ol class="viewer-nav"><li *ngFor="let section of sections" 
    [attr.data-sectionvalue]="section.value">{{ section.text }}</li>  
</ol>

或者

<ol class="viewer-nav"><li *ngFor="let section of sections" 
    attr.data-sectionvalue="{{section.value}}">{{ section.text }}</li>  
</ol>

另请参见：

• 如何在Angular 2中添加条件属性？

- Günter Zöchbauer

---

如何访问数据属性的值？ - Sean W

请提供一个包含演示你想要实现的代码的新问题。 - Günter Zöchbauer

这应该是谷歌上针对“无法绑定到''，因为它不是''已知属性的#1答案”的问题。这条评论可能会有所帮助... - netzaffin

@netzaffin 这是一个有用的答案，但我已经遇到了无法绑定的错误很多次，而这是第一次出现实际的问题/解决方案。 - Stack Underflow

如何将回调函数绑定到data-*属性？ - Devmaleeq

@Malik 什么回调函数？属性值只能是字符串，你不能将函数引用表示为字符串。这与Angular无关，这是纯DOM的事情。 - Günter Zöchbauer

Answer 2

关于访问

<ol class="viewer-nav">
    <li *ngFor="let section of sections" 
        [attr.data-sectionvalue]="section.value"
        (click)="get_data($event)">
        {{ section.text }}
    </li>  
</ol>

而且

get_data(event) {
   console.log(event.target.dataset.sectionvalue)
}

- Max Shmelyov