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

Question

我需要将动态文本绑定到HTML页面上的aria-label属性中。 这是一个Angular 2应用程序。我正在使用类似以下的代码：

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

但我遇到了一个错误：

无法绑定到'aria-label'，因为它不是'div'的已知属性。

有什么解决方法吗？

- namrata

Answer 1

只需在 aria-label 前使用 attr.：

attr.aria-label="产品详细信息：{{productDetails?.ProductName}}"

或者

[attr.aria-label]="'产品详细信息：' + productDetails?.ProductName"

示例在这里：https://stackblitz.com/edit/angular-aria-label?embed=1&file=src/app/app.component.html&hideExplorer=1

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

请参见他在这里的答案：Angular Material mat-label accessibility

- Bruno João

---

应为[attr.aria-label]="productDetails?.ProductName"，意思是将productDetails?.ProductName的值绑定到aria-label属性上。 - Luca De Nardi

@LucaDeNardi，实际上，你的方法不够易读，而且你忘记添加静态字符串部分“Product details for...”。我已经添加了你建议的选择器，以便任何人都可以找到最适合他们情况的选择器。 - Bruno João

抱歉，我想表达的是你不应该同时使用[attr.aria-label]和{{productDetails}}，因为方括号已经解析了变量。你应该将属性写成没有方括号但有花括号，或者有方括号但没有花括号。请注意不要改变原来的意思。 - Luca De Nardi

@LucaDeNardi 谢谢你告诉我。我已经移除了括号。 - Bruno João

@BrunoJoão，最理想的方法是使用方括号。 - River CR Phoenix

如果有人想知道，[attr.aria-labelledby]同样适用于labelledby。 - Bullsized

Answer 2

您应该在目标属性周围使用方括号（[ ]）：

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

- Kabb5

Answer 3

此外，如果productDetails中的ProductName为空或未定义，则可以进一步检查。

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

这样JAWS/NVDA/Narrator就能够读出该值是否存在。

- Nɪsʜᴀɴᴛʜ ॐ

Answer 4

这对我来说是有效的，不需要[]。

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

- MMGuz