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

Question

我感觉我失去了一些东西。当我尝试在我的

data

中使用

attribute

template

时，如下所示：

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

我显然遗漏了一些语法，请帮忙。

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

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