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

Question

J'ai l'impression de rater quelque chose. Quand j'essaie d'utiliser un dataattribute dans mon template, comme ceci:

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

Angular 2 plante avec:

EXCEPTION: Erreurs d’analyse de modèle: impossible de se lier à 'sectionvalue' car ce n'est pas une propriété native connue ("

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

Il me manque évidemment quelque chose avec la syntaxe, aidez-moi s'il vous plaît.

Answer 1

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?

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