Как я могу написать атрибуты данных, используя Angular?

Я чувствую, что что-то упустил. Когда я пытаюсь использовать attribute data в моем template, например так:

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

Angular 2 вылетает с:

ИСКЛЮЧЕНИЕ: Ошибки синтаксического анализа шаблона: невозможно связать с 'sectionvalue', поскольку оно не является известным собственным свойством ("
] data-sectionvalue = "{{section.value}}"> {{section.text}}

Я явно что-то упустил с синтаксисом, пожалуйста, помогите.

Ответ 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?

Ответ 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)
}