關於如何將jQuery添加到angular 2項目中的問題

Question

嗨，我想在我的angular 2 projet中添加一些jquery代碼，以動態添加輸入文本字段，它的工作是有效的，但是當我單擊以下代碼時，removeTextField不會執行：

addTextField(){
var newTextBoxDiv = $(document.createElement('div'))
     .attr("id", 'TextBoxDiv' + this.counter);

newTextBoxDiv.after().html('<label>Textbox #'+ this.counter + ' : </label>' +
      '<input type="text" name="textbox' + this.counter +
      '" id="textbox' + this.counter + '" value="" >'+'<span (click)="removeTextField(this.counter)" class="glyphicon glyphicon-remove pull-right" style="z-index:33;cursor: pointer">  </span>');
newTextBoxDiv.appendTo("#TextBoxesGroup");
this.counter++;

}

 removeTextField(currentTextField){
  alert(currentTextField);
 }

任何建議，請！

Answer 1

這樣嘗試

例如，如果您輸入的文本字段像

<input type="text" class="my-input-field">

在您的控制器中

$(document).click("on", ".my-input-field", ()=>{
   //capture the currentTextField using jquery
   this.removeTextField(currentTextField);
})

   removeTextField(currentTextField){

}

示例其在角度2中實現的數據表。動態顯示更新和刪除按鈕。

的HTML

<table class="datatable table table-striped table-bordered" (click)="onTableClick($event)"></table>

控制者

onTableClick(event){

   if(event.target.className.indexOf('update-row')!= -1){ //will get the class name and check if matches update button class
     this.updateRow($(event.target).attr("data-id"))
   }
   if(event.target.className.indexOf('delete-row')!= -1){ //will get the class name and check if matches delete button class
     this.deleteRow($(event.target).attr("data-id"))
   }
  }