Wie kann ich Datenattribute mit Angular schreiben?

228

Wenn ich versuche, ein data attributein meinem zu verwenden template, so:

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

Angular 2 stürzt ab mit:

AUSNAHME: Fehler beim Analysieren von Vorlagen: Kann nicht an 'sectionvalue' gebunden werden, da es sich nicht um eine bekannte native Eigenschaft handelt ("

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

Mir fehlt offensichtlich etwas an der Syntax, bitte helfen Sie.

Serj Sagan
quelle

Antworten:

470

Verwenden Sie stattdessen die Attributbindungssyntax

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

oder

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

Siehe auch :

Günter Zöchbauer
quelle
20
Wie greife ich auf den Wert des Datenattributs zu?
Sean W
4
Bitte erstellen Sie eine neue Frage mit einem Code, der zeigt, was Sie erreichen möchten.
Günter Zöchbauer
10
Dies sollte die Antwort Nr. 1 von Googles für die Option " Kann nicht an" gebunden werden, da dies keine bekannte Eigenschaft der Abfrage "" ist . Dieser Kommentar könnte ein bisschen helfen ...
Netzaffin
1
@netzaffin Dies ist eine nützliche Antwort, aber ich bin viele Male auf den Fehler "Kann nicht binden" gestoßen, und dies ist das erste Mal, dass dies das eigentliche Problem / die eigentliche Lösung war.
Stack Underflow
32

Über den Zugang

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

Und

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