Bagaimana saya bisa menulis atribut data menggunakan Angular?

229

Ketika saya mencoba menggunakan data attributedi saya template, seperti ini:

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

Angular 2 crash dengan:

PENGECUALIAN: Kesalahan parse templat: Tidak dapat mengikat ke 'nilai bagian' karena ini bukan properti asli yang dikenal ("

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

Saya jelas kehilangan sesuatu dengan sintaks, tolong bantu.

Serj Sagan
sumber

Jawaban:

471

Gunakan sintaks pengikatan atribut

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

atau

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

Lihat juga :

Günter Zöchbauer
sumber
20
bagaimana cara mengakses nilai atribut data?
Sean W
4
Harap buat pertanyaan baru dengan beberapa kode yang menunjukkan apa yang ingin Anda capai.
Günter Zöchbauer
10
Ini harus menjadi jawaban Google # 1 untuk Tidak dapat mengikat ke '' karena itu bukan properti yang dikenal dari permintaan '' . Komentar ini mungkin sedikit membantu ...
netzaffin
1
@netzaffin Ini adalah jawaban yang berguna tetapi saya telah menemukan kesalahan yang tidak dapat diikat berkali-kali dan ini adalah pertama kalinya ini adalah masalah / solusi aktual.
Stack Underflow
32

Tentang akses

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

Dan

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