angular - 动态生成的 HTML Angular 2 中的单击事件不起作用

Question

当 http.get 方法更新我时，我正在创建表行...在接收数据时，我在 Angular 2 版本中使用 JS/jquery 创建表行。

我的代码:

<tr>
    <td>2</td>
    <td>BAJAJ-AUTO</td>
    <td>14.284%</td>
    <td>27/12/2013 12:00 am</td>
    <td>30/12/2013 12:00 am</td>
    <td>1935</td>
    <td>30/12/2013 12:00 am</td>
    <td>1935</td>
    <td>31/12/2013 12:00 am</td>
    <td>2120</td>
    <td><button class="btn btn-default" onclick="processAdvise('BAJAJ-AUTO')">Process Advise</button></td>
</tr>

所以最后一个 td - 有一个按钮，该按钮将调用我的 angular 2 函数来处理它 - 即使在函数开始时，此代码也不会到达

我也试过了，没用:

• (点击) 用于 Angular 2
• onclick 并使用脚本标签

Answer 1

Angular2 不会以任何方式处理组件模板之外的 HTML，因此它应该是 (click)="processAdvise('BAJAJ-AUTO')不起作用。

onclick="processAdvise('BAJAJ-AUTO')" processAdvise() 时也不起作用是 Angular2 组件的方法，因为 onclick仅 HTML，并且以这种方式分配的函数在全局 JS 范围内搜索，而不是在组件类内。

<script>标签已从 Angular2 模板中移除

@Component({
  selector: '...',
  ....
})
class MyComponent {
  constructor(private elRef:ElementRef) {
  }

  addHtml() {
    // add the HTML to the DOM
    this.elRef.nativeElement.querySelector('button').addEventListener('click', (event) => this.handleClick(event));
  }

  handleClick(event) {
    // doSomething();
  }
}