单击事件无法动态生成HTML角度2

Abd*_*ala 2 angular

http.get方法更新我时,我正在创建表行...接收数据我使用角度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>
Run Code Online (Sandbox Code Playgroud)

所以最后一个td- 有一个按钮,它将调用我的角度2函数来处理它 - 这个代码即使在函数的开头也不会到达

我也试过这个无济于事:

  • (click) 为角2
  • onclick 并使用脚本标记将该函数保存在同一HTML模板中

Gün*_*uer 5

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();
  }
}
Run Code Online (Sandbox Code Playgroud)