Angular中ngFor内按钮aria-label如何引用循环元素解决绑定报错

报错是两个写法问题共同导致的：

1. aria-label是HTML元素的attribute，不是button原生的DOM property，Angular中绑定这类非原生DOM属性时，必须加attr.前缀，否则框架会尝试在元素实例上查找对应属性，找不到就抛出你看到的绑定错误。
2. 原代码混用了属性绑定语法和插值语法：方括号[]包裹的属性绑定内部是纯模板表达式，不能嵌套{{}}插值标记。

两种写法都可以在*ngFor循环中正常生效，按需选择即可：

方案1：使用attr前缀做属性绑定（推荐） #

用[attr.aria-label]做属性绑定，内部直接写字符串拼接表达式，不需要加插值标记：

<div *ngFor="let element of elements">
  <span>{{element.elementName}}</span>
  <button 
    mat-icon-button 
    [attr.aria-label]="'Remove ' + element.elementName + ' from elements'"
    (click)="removeElement(element)">
    <mat-icon>remove_circle</mat-icon>
  </button>
</div>

方案2：直接用插值语法拼接属性值 #

不使用方括号做绑定，直接在aria-label属性的双引号内写插值内容，不需要额外包裹字符串引号：

<div *ngFor="let element of elements">
  <span>{{element.elementName}}</span>
  <button 
    mat-icon-button 
    aria-label="Remove {{element.elementName}} from elements"
    (click)="removeElement(element)">
    <mat-icon>remove_circle</mat-icon>
  </button>
</div>

两种写法编译后，会自动为循环生成的每个按钮匹配对应项的名称生成aria-label值，对应给出的测试数据，两个按钮的无障碍标签分别为Remove Name1 from elements和Remove Name2 from elements，完全符合Web无障碍访问要求。

内容的提问来源于stack exchange，提问作者Malfestio