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

我觉得我错过了什么。当我尝试在我的template中使用data attribute时，如下所示:

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

Angular 2崩溃与:

EXCEPTION:模板解析错误:不能绑定到'sectionvalue'，因为它不是一个已知的本地属性("
] data-sectionvalue = "{{部分。值}}">{{section。李文本}}< / >

我显然在语法上遗漏了一些东西，请帮助。

162982 次浏览

小开

最佳答案

请使用属性绑定语法

<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中添加条件属性?< / >

小开

关于访问

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