Comment puis-je écrire des attributs de données en utilisant Angular?

Lorsque j'essaie d'utiliser un data attributedans mon template, comme ceci:

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

Angular 2 se bloque avec:

EXCEPTION: erreurs d'analyse de modèle: impossible de se lier à "valeur de section" car il ne s'agit pas d'une propriété native connue ("

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

Il me manque évidemment quelque chose avec la syntaxe, aidez-moi.

Utilisez plutôt la syntaxe de liaison d'attribut

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

ou

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

Voir également :

• Comment ajouter un attribut conditionnel dans Angular 2?

À propos de l'accès

<ol class="viewer-nav">
    <li *ngFor="let section of sections" 
        [attr.data-sectionvalue]="section.value"
        (click)="get_data($event)">
        {{ section.text }}
    </li>  
</ol>

Et

get_data(event) {
   console.log(event.target.dataset.sectionvalue)
}