How to bind dynamic data to ARIA-LABEL?

问题

I have dynamic text to bind to ARIA-LABEL on an html page. This is an angular 2 app. I am using something like this: aria-label="Product details for {{productDetails?.ProductName}}"

But I get an error - Can't bind to 'aria-label' since it isn't a known property of 'div'.

Is there any workaround for this?

回答1:

Just use attr. before aria-label:

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

or

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

Examples here: https://stackblitz.com/edit/angular-aria-label?embed=1&file=src/app/app.component.html&hideExplorer=1

回答2:

You should use square brackets ([ ]) around the target property:

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

来源：https://stackoverflow.com/questions/42658800/how-to-bind-dynamic-data-to-aria-label