Come posso scrivere gli attributi dei dati usando Angular?


229

Quando provo ad usare a data attributein my template, in questo modo:

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

Angular 2 si blocca con:

ECCEZIONE: errori di analisi del modello: impossibile eseguire il bind a "sectionvalue" poiché non è una proprietà nativa nota ("

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

Mi manca ovviamente qualcosa con la sintassi, per favore aiutatemi.

Risposte:


471

Utilizzare invece la sintassi di associazione degli attributi

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

o

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

Guarda anche :


20
come accedo al valore dell'attributo data?
Sean W,

4
Si prega di creare una nuova domanda con un po 'di codice che dimostra ciò che si tenta di realizzare.
Günter Zöchbauer,

10
Questa dovrebbe essere la risposta numero 1 di Googles per il Can't bind to '' poiché non è una proprietà nota di '' query. Questo commento potrebbe aiutare un po '...
Netzaffin,

1
@netzaffin Questa è una risposta utile, ma mi sono imbattuto molte volte nell'errore impossibile da associare e questa è la prima volta che si trattava del problema / soluzione attuale.
Stack Underflow

32

Informazioni sull'accesso

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

E

get_data(event) {
   console.log(event.target.dataset.sectionvalue)
}
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.