Angular绑定div自定义属性报Can't bind to 'showQR'错如何解决

云上老周

2026-9-28

错误原因

原生 <div> 元素没有内置的 showQR、selectedCoin 这类自定义属性，Angular 的方括号[]属性绑定默认会优先匹配目标元素的内置DOM属性、或者目标组件/指令的输入属性，匹配不到就会抛出该错误。另外你还存在大小写不匹配的问题：组件中声明的变量是showQr（末尾r小写），模板中绑定的属性值写的是showQR（末尾R大写），即使属性绑定规则正确，也无法正常传递数值。

解决方法

根据你的实际使用场景选择对应方案即可：

场景1：你想绑定的是自定义组件的输入属性
如果你是把empower-btn作为自定义组件使用，首先不要用原生<div>标签，要替换为你自定义组件的选择器（比如<app-empower-btn>，具体看你组件里的selector配置），然后在组件代码中给需要接收外部值的属性加上@Input()装饰器，示例：
```
// 自定义组件的ts文件
import { Input } from '@angular/core';

@Component({
  selector: 'app-empower-btn',
  // ...其余配置
})
export class EmpowerBtnComponent {
  @Input() showQR: boolean;
  @Input() selectedCoin: any;
  @Input() availableAmount: number;
  @Input() coinAmount: number;
  // ...其余逻辑
}
```
场景2：你仅需要给普通div挂载自定义属性，不需要子组件接收值
给绑定的属性名加上attr.前缀，强制Angular将其作为普通HTML attribute处理，修改模板写法即可：
```
<div
  class="empower-btn"
  [attr.showQR]="showQr"
  [attr.selectedCoin]="coin"
  [attr.availableAmount]="getCoinAmount()"
  [attr.coinAmount]="getCoinAmount()"
>stuff</div>
```
场景3：这些属性是给自定义指令使用的
确保你编写的自定义指令已经在当前模块的declarations数组中注册，同时在指令代码中给对应属性添加@Input()装饰器声明即可。