276

I feel like I am missing something. When I try to use a data attribute in my template, like this:

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

Angular 2 crashes with:

EXCEPTION: Template parse errors: Can't bind to 'sectionvalue' since it isn't a known native property ("

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

I'm obviously missing something with the syntax, please help.

4

2 回答 2

569

改用属性绑定语法

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

也可以看看 :

于 2015-12-31T07:31:14.540 回答
46

关于访问

<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)
}
于 2018-05-29T10:48:51.633 回答