¿Cómo puedo escribir atributos de datos usando Angular?

229

Cuando trato de usar un data attributeen mi template, así:

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

Angular 2 se bloquea con:

EXCEPCIÓN: Errores de análisis de plantilla: no se puede vincular a 'sectionvalue' ya que no es una propiedad nativa conocida ("

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

Obviamente me falta algo con la sintaxis, por favor ayuda.

Serj Sagan
fuente

Respuestas:

471

Utilice la sintaxis de enlace de atributo en su lugar

<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>

Ver también :

Günter Zöchbauer
fuente
20
¿Cómo accedo al valor del atributo de datos?
Sean W
44
Cree una nueva pregunta con un código que demuestre lo que intenta lograr.
Günter Zöchbauer
10
Esta debería ser la respuesta # 1 de Google para la consulta No se puede vincular a '' ya que no es una propiedad conocida de '' . Este comentario podría ayudar un poco ...
netzaffin
1
@netzaffin Esta es una respuesta útil, pero me he encontrado con el error No puedo vincular muchas veces y esta es la primera vez que este fue el problema / solución real.
Stack Underflow
32

Sobre el acceso

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

Y

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