ฉันจะเขียนคุณสมบัติข้อมูลโดยใช้ Angular ได้อย่างไร


229

เมื่อฉันพยายามที่จะใช้data attributeในของฉันtemplateเช่นนี้:

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

Angular 2 ขัดข้องด้วย:

ข้อยกเว้น: ข้อผิดพลาดในการแยกวิเคราะห์แม่แบบ: ไม่สามารถผูกกับ 'sectionvalue' เนื่องจากไม่ใช่คุณสมบัติดั้งเดิมที่รู้จัก ("

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

เห็นได้ชัดว่าฉันขาดอะไรบางอย่างกับไวยากรณ์โปรดช่วยด้วย

คำตอบ:


471

ใช้ไวยากรณ์การโยงแอตทริบิวต์แทน

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

หรือ

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

ดูสิ่งนี้ด้วย :


20
ฉันจะเข้าถึงค่าของ data data ได้อย่างไร?
Sean W

4
กรุณาสร้างคำถามใหม่ด้วยรหัสที่แสดงให้เห็นถึงสิ่งที่คุณพยายามที่จะบรรลุ
GünterZöchbauer

10
นี่ควรเป็นคำตอบของ Googles # 1 สำหรับคำถามที่ไม่สามารถผูกกับ '' เนื่องจากไม่ใช่คุณสมบัติของแบบสอบถาม'' ความคิดเห็นนี้อาจช่วยเล็กน้อย ...
netzaffin

1
@netzaffin นี่เป็นคำตอบที่มีประโยชน์ แต่ฉันพบข้อผิดพลาดที่ไม่สามารถผูกหลายครั้งและนี่เป็นครั้งแรกที่นี่เป็นปัญหา / ทางออกที่แท้จริง
Stack Underflow

32

เกี่ยวกับการเข้าถึง

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

และ

get_data(event) {
   console.log(event.target.dataset.sectionvalue)
}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.