如何使用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}}

我显然缺少语法，请帮忙。

angular angular2-template

— 塞吉·萨根（Serj Sagan）
source

Answers:

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>

也可以看看：

如何在Angular 2中添加条件属性？

— 贡特·佐赫鲍尔（GünterZöchbauer）
source

如何访问数据属性的值？

— 肖恩W

请使用一些代码来演示您要完成的任务，以创建一个新问题。

— 君特Zöchbauer

这应该是Google对于“ 无法绑定到”的第一答案，因为它不是“”查询的已知属性。此评论可能会有所帮助...

— netzaffin

@netzaffin这是一个有用的答案，但是我很多次遇到了无法绑定的错误，这是第一次这是实际的问题/解决方案。

— 堆栈下溢

关于访问

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

— 马克斯·谢梅廖夫
source

如何使用Angular编写数据属性？

也可以看看 ：

也可以看看：