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

Question

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

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

但我得到一个错误：

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

有什么解决方法吗？

原文由 namrata 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

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

在这里查看他的答案 Angular Material mat-label 可访问性

原文由 Bruno João 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

原文由 Kabb5 发布，翻译遵循 CC BY-SA 4.0 许可协议