无法将变量设置为html元素属性 [英] Can't set variable as html element attribute

问题描述

我发现了一个我不知道如何解决的问题.

I found a problem that I do not know how to solve.

如果使用此模板，则没有问题:

If you use this template, so there is no problem:

<li *ngFor="#supplier of supplierList | async">
    <a (click)="changeSupplier($event)">
        <span>{{supplier.id}}: {{supplier.name}}</span>
    </a>
</li>

输出例如:

<li>
    <a>
        <span>1: Sony</span>
    </a>
</li>
<li>
    <a>
        <span>2: Samsung</span>
    </a>
</li>

如果我编辑模板并尝试将"supplier.id"设置为html属性"data-supplierid":

If I edit a template and try to set the "supplier.id" into html attribute "data-supplierid":

<li *ngFor="#supplier of supplierList | async">
    <a (click)="changeSupplier($event)" data-supplierid="{{supplier.id}}">
        <span>{{supplier.name}}</span>
    </a>
</li>

出现错误:

Can't bind to 'supplierid' since it isn't a known native property ("i>
                    <li *ngFor="#supplier of supplierList | async">
                        <a (click)="changeSupplier($event)" [ERROR ->]data-supplierid="{{supplier.id}}">
                            <span>{{supplier.name}}</span>
                        </a>

推荐答案

默认为属性绑定.对于属性绑定，可以使用

Default is property binding. For attribute binding use either

attr.data-supplierid="{{supplier.id}}"

或

[attr.data-supplierid]="supplier.id"

这篇关于无法将变量设置为html元素属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！