2017-05-10 205 views
1

我曾經在我的組件以下功能:角2(變化)事件不觸發

onProductSelect(e){ 
     var attrs = document.getElementById('firstAttr');   
     return this.groupComponentSvs.getProduct(e.target.value) 
         .subscribe(
          selectProduct=>{         
           this.selectProduct=selectProduct; 
           var select = "<select class='form-control' id='"+ selectProduct.attribute +"' (change)='selectNextAttr($event)' name='selectProd'>"; 
           console.log(select); 
            select+= '<option value="0">Select</option>'; 
           for (var i=0; i<selectProduct.values.length; i++) { 
            select+= '<option value='+ selectProduct.values[i]+ '>'+ selectProduct.values[i] +'</option>'; 
           } 
           select+='</select>' ;         
           attrs.innerHTML = '<div id=attr_'+ selectProduct.attribute +'>'+ select +'</div>';        
           error=>this.errorMessage = <any>error 
          }        
       )     

    } 

selectNextAttr(attr, val){ 
console.log("this is a test"); 
} 

我能夠插入選擇菜單中的我的HTML頁面,但變化事件未與我觸發選擇一個物品。有人能告訴我爲什麼會發生這種情況嗎?

感謝

+0

請分享您的HTML代碼 –

+0

確定在Angular 2中有'(change)'事件有問題,如果您注意的話,它和'(blur)'的作用相同。是的,您可以使用'(ngModelChange)這會在用戶輸入發生一些變化時立即觸發 – mayur

回答

0

您應該使用ngModelChange,而不是change

"<select class='form-control' id='"+ selectProduct.attribute +"' (ngModelChange)='selectNextAttr($event)' name='selectProd'>" 
+0

嘗試過,但它仍然不起作用。 – aej1973

4

檢查這個答案:https://stackoverflow.com/a/33716321/2114024

嘗試:

<select [ngModel]='selectedProduct' 
     class='form-control' 
     [id]='"+ selectProduct.attribute +"' 
     (ngModelChange)='selectNextAttr($event)' name='selectProd'> 
+0

感謝您回到我身邊,似乎仍然無法正常工作。如果我做了以下工作,但我需要使用ts動態地添加它: – aej1973

+0

HTML代碼: aej1973

+0

TS:onProductSelect(e){ // var attrs = document.getElementById('firstAttr'); 返回this.groupComponentSvs.getProduct(e.target.value) .subscribe( selectProduct => { this.selectProduct = selectProduct; 誤差=> this.errorMessage = 錯誤 } ) } – aej1973

5

使用[innerHTML]="..."添加的HTML是而不是以任何方式通過Angular進行處理,並且不會爲此類HTML創建組件,指令。 爲了安全起見,Angular認爲這種HTML只是一種消毒方式。

因此,你不能使用[ngModel]="..."(ngModelChange)="..."

一種方式來處理這種要求是在運行時動態創建組件,並使用創建的HTML作爲模板,這樣的組件。 請參閱Equivalent of $compile in Angular 2瞭解如何完成此操作。