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

【问题标题】：How to bind dynamic data to aria-label?如何将动态数据绑定到 aria-label？
【发布时间】：2017-07-28 06:44:48
【问题描述】：

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

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

但我得到一个错误：

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

有什么解决方法吗？

【问题讨论】：

【解决方案1】：

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

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

或

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

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

【讨论】：

应该是[attr.aria-label]="productDetails?.ProductName"
@LucaDeNardi，实际上，您的方式可读性较差，您忘记添加静态字符串部分Product details for...。我已经为任何想要最适合他们情况的人添加了您建议的选择器。
@BrunoJoão 抱歉，我的意思是你不应该同时使用 [attr.aria-label] 和 {{productDetails}}，因为方括号已经解析了变量。你要么写你的属性不带方括号和大括号，或你的属性带方括号和不带大括号。
@LucaDeNardi 感谢您让我知道。我已经删除了括号。
@BrunoJoão 理想的方法是使用方括号。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

如果 productDetails 中的 ProductName 为 null 或未定义为，也可以进一步检查

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

以便 JAWS/NVDA/Narrator 能够读取它的值是否存在..

【讨论】：

【解决方案4】：

这对我有用没有[]。

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

【讨论】：