Html 如何将动态数据绑定到 ARIA-LABEL？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42658800/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to bind dynamic data to ARIA-LABEL?
提问by namrata
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}}"
我有动态文本绑定到 html 页面上的 ARIA-LABEL。这是一个 angular 2 应用程序。我正在使用这样的东西：aria-label="{{productDetails?.ProductName}} 的产品详细信息"
But I get an error - Can't bind to 'aria-label' since it isn't a known property of 'div'.
但是我收到一个错误 - 无法绑定到“aria-label”，因为它不是“div”的已知属性。
Is there any workaround for this?
有什么解决方法吗？
回答by Bruno Jo?o
Just use attr.before aria-label:
只需attr.在 aria-label 之前使用：
attr.aria-label="Product details for {{productDetails?.ProductName}}"
attr.aria-label="Product details for {{productDetails?.ProductName}}"
or
或者
[attr.aria-label]="'Product details for ' + productDetails?.ProductName"
[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
这里的例子：https: //stackblitz.com/edit/angular-aria-label?embed=1&file=src/app/app.component.html&hideExplorer=1
Ps. As @Simon_Weaver mentioned, there are some components that implements its own aria-label @Input, like mat-select.
附言。正如@Simon_Weaver 所提到的，有一些组件实现了自己的 aria-label @Input，例如mat-select.
See his answer here Angular Material mat-label accessibility
在此处查看他的回答Angular Material mat-label 可访问性
回答by Kabb5
You should use square brackets ([ ]) around the target property:
您应该[ ]在目标属性周围使用方括号 ( )：
[attr.aria-label]="'Product details for' + productDetails?.ProductName"
回答by Simon_Weaver
There's an important gotcha if you confuse [aria-label]and [attr.aria-label]- especially relevant with material controls.
如果您混淆了[aria-label]和[attr.aria-label]- 特别是与材料控制相关的问题，那么有一个重要的问题。
