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


229

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.

Réponses:


471

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 :


20
comment accéder à la valeur de l'attribut de données?
Sean W

4
Veuillez créer une nouvelle question avec du code qui montre ce que vous essayez d'accomplir.
Günter Zöchbauer

10
Cela devrait être la réponse de Googles # 1 à la requête Impossible de se lier à '' car ce n'est pas une propriété connue de la requête '' . Ce commentaire pourrait aider un peu ...
netzaffin

1
@netzaffin Ceci est une réponse utile, mais j'ai rencontré l'erreur de liaison plusieurs fois et c'est la première fois que c'est le problème / la solution réelle.
Stack Underflow

32

À 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)
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.