Angular ngFor中testid绑定报错，如何拼接ID与索引值？

嘿，我来帮你拆解这两个报错的根源和解决办法！

第一个错误：Can't bind to 'testid' since it isn't a known property of 'input' #

这个报错的核心原因很直白：你大概率写成了 <input [testid]="xxx"> 这种格式。Angular看到方括号[]时，会默认认为你要绑定这个元素的组件输入属性，但原生HTML的input标签根本没有名为testid的输入属性，所以它会报错说这个属性不存在。

正确的做法是，我们要设置的是原生HTML的自定义data-testid属性，而非Angular组件的输入属性，所以有两种正确写法：

• 静态值直接写：

  <input data-testid="form-input-username">
  

• 动态绑定变量时，要加上attr.前缀（告诉Angular这是原生HTML属性）：

  <input [attr.data-testid]="'form-input-' + fieldName">
  

第二个问题：ngFor循环中拼接索引的代码触发相同报错 #

你给出的代码是：

<td *ngFor="let col of columns; let i = index" [ngClass]="col.class" data-testid="form-create-td-{{i}}">

这段代码本身是没问题的——用插值表达式{{i}}拼接data-testid是原生属性的合法写法，不应该触发testid绑定的报错。那为什么会出现同样的错误？大概率是你实际代码里犯了以下某个小错误：

• 不小心把data-testid写成了[testid]，比如误写成 <td [testid]="'form-create-td-' + i">，这就会和第一个错误的原因一样，触发属性不存在的报错；
• 模板中其他位置的元素还有[testid]的错误写法，导致报错指向了这个td所在的代码块。

针对这个ngFor场景，更符合Angular最佳实践的写法是用属性绑定（加上attr.前缀）：

<td *ngFor="let col of columns; let i = index" [ngClass]="col.class" [attr.data-testid]="'form-create-td-' + i">

这种写法和插值表达式的效果完全一致，但Angular的变更检测会更高效。

总结一下核心要点 #

• 当你要绑定原生HTML的自定义属性（比如data-*系列）时，如果用方括号[]动态绑定，必须加上attr.前缀；
• 静态属性值直接写data-testid="xxx"即可，不需要方括号；
• 不要把data-testid简写成testid并加方括号，这会让Angular误以为你要绑定组件的输入属性。

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