Angular中ngFor内(click)事件里的字符串插值问题

你碰到的这个坑其实挺常见的——在Angular的事件绑定表达式里，模板插值{{}}是行不通的，而直接把变量塞进单引号字符串里又会被当成纯文本。给你两种靠谱的解决办法：

方法一：使用ES6模板字符串（推荐） #

用反引号`包裹整个字符串，变量部分用${}包裹，这样Angular就能正确识别并替换变量的值了：

<div *ngFor="let account of accounts">
  <button (click)="function1(); account.message = `How do I interpolate ${account.something} here`">
    点击测试
  </button>
</div>

方法二：字符串拼接（兼容旧环境） #

如果项目还需要兼容不支持ES6的环境，就用传统的字符串相加方式，把静态文本和变量用+连接起来：

<div *ngFor="let account of accounts">
  <button (click)="function1(); account.message = 'How do I interpolate ' + account.something + ' here'">
    点击测试
  </button>
</div>

为啥原来的写法不行？ #

• 模板插值{{}}只能用在模板的内容区域（比如<div>{{value}}</div>），不能放在事件绑定的表达式里，所以Angular会抛出Got interpolation ({{}}) where expression was expected的错误。
• 把account.something写在单引号里时，整个内容是一个字符串字面量，Angular不会解析里面的变量名，自然就直接输出account.something这串文本了。

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