如何将动态数据绑定到 aria-label？

Question

我有动态文本要绑定到 HTML 页面上的 aria-label。 这是一个 Angular 2 应用程序。我正在使用这样的东西：

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

但是我得到一个错误：

Can't bind to 'aria-label' since it isn't a known property of 'div'.

有什么解决方法吗？

Answer 1

只需在 aria-label 前使用 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

Ps。正如@Simon_Weaver 提到的，有一些组件实现了自己的 aria-label @Input，例如 mat-select。

在这里查看他的回答

Answer 2

您应该在目标周围使用方括号 ([ ]) 属性:

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

Answer 3

这对我有用 没有 [].

attr.aria-labelledby="navbarDropdownMenuLink{{ i }}"

Answer 4

还可以进一步检查 productDetails 中的 ProductName 是否为空或未定义为

[attr.aria-label]="(typeof productDetails.ProductName !== 'undefined') ? 
'Product details for ' + productDetails.ProductName : '' "

这样 JAWS/NVDA/Narrator 就可以读取它的值是否存在..