No se puede establecer la variable como atributo de elemento html [duplicado]
Esta pregunta ya tiene una respuesta aquí:
Atributos de datos angulares 2 2 respuestasEncontré un problema que no sé cómo resolver.
Si usa esta plantilla, entonces no hay problema:
<li *ngFor="#supplier of supplierList | async">
<a (click)="changeSupplier($event)">
<span>{{supplier.id}}: {{supplier.name}}</span>
</a>
</li>
La salida es, por ejemplo:
<li>
<a>
<span>1: Sony</span>
</a>
</li>
<li>
<a>
<span>2: Samsung</span>
</a>
</li>
Si edito una plantilla e intento configurar el "proveedor.id" en el atributo html "data-supplierid":
<li *ngFor="#supplier of supplierList | async">
<a (click)="changeSupplier($event)" data-supplierid="{{supplier.id}}">
<span>{{supplier.name}}</span>
</a>
</li>
Aparece un error:
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>