Как связать динамические данные с ARIA-LABEL?

У меня есть динамический текст для привязки к ARIA-LABEL на странице html. Это приложение angular 2. Я использую что-то вроде этого: aria-label = "Сведения о продукте для {{productDetails?.ProductName}}"

Но я получаю сообщение об ошибке - Невозможно связать с 'aria-label', поскольку это не является известным свойством 'div'.

Есть ли какое-либо обходное решение для этого?

Ответ 1

Просто используйте attr. до арии-лейбла:

attr.aria-label="Product details for {{productDetails?.ProductName}}"

или же

[attr.aria-label]="'Product details for ' + productDetails?.ProductName"

Примеры здесь: https://stackblitz.com/edit/angular-aria-label?embed=1&file=src/app/app.component.html&hideExplorer=1

Ответ 2

Вы должны использовать квадратные скобки ([ ]) вокруг целевого свойства:

[attr.aria-label]="'Product details for' + productDetails?.ProductName"