Як я можу записати атрибути даних за допомогою Angular?

Коли я намагаюся використовувати data attributeмоє template, наприклад:

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

Angular 2 збої з:

ВИХІД: Помилки розбору шаблонів: Неможливо прив’язати до 'valuevalue', оскільки це не відома рідна властивість ("

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

Мені, очевидно, щось не вистачає із синтаксисом, будь ласка, допоможіть.

Використовуйте замість синтаксису зв'язування атрибутів

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