Question

我创建了一个具有多重表行和多重列的HTML表。第一行是文本输入字段，用于搜索以下数据。当用户输入一个值时，应该调用搜索功能，但是永远不会触发该事件。如果我将具有相同语法的输入字段放在表格标签之外，则会像预期的那样触发该函数。以下功能不是搜索功能。它只是一个检查事件是否触发的测试功能。

HTML：

 <table id="result1" style="overflow-y: hidden; overflow-x: auto;">
  <thead>
   <tr>
    <td>
      <input (input)="test_2()" type="text" id="searchbar_2">          
    </td>

JS：

test_2(){
 let input_2 = String($('#searchbar_2').val());
 console.log("2: " + input_2);
}

Answer 1

使用ngModel：

<input type="text" [(ngModel)]="query" (ngModelChange)="onSearch()">

在组件控制器中：

export class YourComponent {

  query: string;

  onSearch() {
    // your search using this.query
  }
}

https://stackblitz.com/edit/angular-pgdxbl

Answer 2

 <td><input type="text" (click)="onClickMe()"></td>

以及您的组件中

 onClickMe() {
    console.log('cliked');
  }

检查此示例 https://stackblitz.com/edit/angular-ks4okw

在<td>元素内调用Javascript函数

2 个答案: