Angular 2数据属性

时间:2015-12-31 07:09:46

标签: angular angular2-template

我觉得我错过了什么。当我尝试在我的data中使用attribute template时,就像这样:

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

Angular 2崩溃:

  

EXCEPTION:模板解析错误:无法绑定到'sectionvalue'   它不是一个已知的本地财产(“

     ] data-sectionvalue =“{{section.value}}”&gt; {{section.text}}

我显然遗漏了一些语法,请帮助。

2 个答案:

答案 0 :(得分:383)

使用属性绑定语法

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

另见How to add conditional attribute in Angular 2?

答案 1 :(得分:18)

关于访问

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