Angular 2中动态构建点击事件失败，如何正确绑定？

嘿，这个问题我之前也踩过坑！你的绑定失效是因为在Angular的事件绑定里错误使用了插值语法{{ }}。

为什么原来的写法不行？ #

Angular的事件绑定（比如(click)）的括号内部是直接的表达式执行上下文，它会直接解析你写的TypeScript风格表达式，不需要额外用插值符号来包裹变量。你写的deleteGrade({{ grade._id }})会被模板解析器当成无效语法，导致绑定根本无法生效。

正确的绑定方式 #

把插值符号去掉，直接传递变量grade._id就可以了：

修正后的 app.component.html

<tr *ngFor="let grade of grades">
  <td>{{ grade.grade }}</td>
  <td>
    <a (click)="deleteGrade(grade._id)" class="btn btn-danger">Delete</a>
  </td>
</tr>

app.component.ts 保持不变即可

deleteGrade(id) {
  console.log(id);
}

额外小提示 #

插值语法{{ }}只用于在模板中显示数据（比如<td>{{ grade.grade }}</td>这种场景），而事件绑定、属性绑定（比如[ngClass]）这类场景里，直接写变量或表达式就好，不需要套插值哦！

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