Невозможно установить переменную как атрибут 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>

Ответы на вопрос(1)

Ваш ответ на вопрос