Невозможно установить переменную как атрибут html-элемента [duplicate]
На этот вопрос уже есть ответ здесь:
Угловые 2 атрибута данных 2 ответаЯ нашел проблему, которую не знаю, как решить.
Если вы используете этот шаблон, то проблем нет:
<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»:
<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>