tutorial - Atributos de datos angulares 2

pasar parametros por url angularjs

Question

Siento que me falta algo. Cuando intento usar un attribute data en mi template , así:

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

Angular 2 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.

Answer 1

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

Answer 2

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>

Consulte también ¿Cómo agregar un atributo condicional en Angular 2?