Como escrever atributos de dados usando Angular?

229

Quando tento usar um data attributeno meu template, assim:

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

Angular 2 trava com:

EXCEÇÃO: Erros de análise de modelo: não é possível vincular a 'sectionvalue', pois não é uma propriedade nativa conhecida ("

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

Obviamente, estou perdendo algo com a sintaxe, por favor ajude.

Serj Sagan
fonte

Respostas:

471

Use a sintaxe de ligação de atributo

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

Veja também :

Günter Zöchbauer
fonte
20
como faço para acessar o valor do atributo data?
10136 Sean W no dia
4
Crie uma nova pergunta com algum código que demonstre o que você tenta realizar.
Günter Zöchbauer 10/11
10
Essa deve ser a resposta número 1 do Google para a consulta Não é possível vincular a '', pois não é uma propriedade conhecida da '' consulta. Este comentário pode ajudar um pouco ...
netzaffin
1
@netzaffin Esta é uma resposta útil, mas já encontrei o erro não pode vincular muitas vezes e esta é a primeira vez que esse foi o problema / solução real.
Stack Underflow
32

Sobre o acesso

<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)
}
Max Shmelyov
fonte