关于之间差异的重要说明[attr.aria-label] 和 [aria-label] ：

按钮可以设置动态 aria标签，例如：

 <button [attr.aria-label]="'This is a button for ' + buttonDescription">Click me</button>

这不适用于所有物质控制，因为某些定义了 @Input （'aria-label'）属性，该属性在内部设置属性（通过@Hostbinding）

This won't work for all material controls since some define an @Input('aria-label') property, which sets the attribute internally (via @Hostbinding)

mat-select 就是这样的控件

mat-select is one such control

源代码

@Input('aria-label')
ariaLabel: string

因此，如果您尝试使用 [attr。] $ mat-select 的c $ c>语法无效，因为该控件实际上将覆盖您显式设置的属性（因为 ariaLabel 输入属性为 mat-select 永远不会设置！）。

Therefore if you do try to use [attr.] syntax for mat-select it won't work because the control will actually overwrite your explicitly set attribute (since the ariaLabel input property to mat-select never gets set!).

<mat-select [attr.aria-label]="'This will be overwritten with undefined!'">...</mat-select>

相反，您必须只使用 aria-label 输入属性。

Instead you must just use aria-label input property.

 <mat-select [aria-label]="'Choose your own adventure! ' + 123">...</mat-select>

 <mat-select aria-label="{{ 'Choose your own adventure - ' + 123 }}">...</mat-select>

 <mat-select aria-label="Choose your own adventure 123">...</mat-select>

一个版本会告诉您是否使用 [aria-label] 当您应该使用 [attr.aria-label] 时（因为编译器会告诉您没有这种输入属性）。因此，如果您不想使用该控件的API，请使用 [aria-label] 开始。

A build will tell you if you use [aria-label] when you should be using [attr.aria-label] (because the compiler will tell you there's no such input property). So if you don't want to go seek out the API for the control you're using start with [aria-label].

https://material.angular.io/components/select/api