click事件不适用于动态生成的HTML angular 2 [英] click event not working from dynamically generated HTML angular 2

问题描述

当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函数进行处理-即使在函数开始时，此代码也不会到达

我也尝试了一下，但无济于事:

• (click)表示角度2
• onclick并使用以下命令将函数保留在相同的HTML模板中 脚本标签

解决方案

Angular2不会以任何方式在组件模板之外处理HTML，因此预期(click)="processAdvise('BAJAJ-AUTO')无法正常工作.

当processAdvise()是Angular2组件的方法时，

onclick="processAdvise('BAJAJ-AUTO')"也将不起作用，因为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();
  }
}

I am creating tables rows when the http.get method updates me ... on receiving data I create table rows using JS / jquery in the angular 2 version.

My Code:

<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>

so the last the td - has a button which shall call my angular 2 function to process it - This code doesnt reaches even at the start of the function

I also tried this to no avail:

• (click) for angular 2
• onclick and kept the function in the same HTML template using script tag

解决方案

Angular2 doesn't process HTML outside of a components template in any way, therefore it is expected (click)="processAdvise('BAJAJ-AUTO') doesn't work.

onclick="processAdvise('BAJAJ-AUTO')" also won't work when processAdvise() is a method of an Angular2 component because onclick is HTML-only and functions assigned this way are searched in the global JS scope not inside a components class.

<script> tags are remove from Angular2 templates

@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();
  }
}

这篇关于click事件不适用于动态生成的HTML angular 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！