角度2(变化)事件未触发

Question

我的组件中有以下功能:

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页面中插入选择菜单,但是我选择一个项目时没有触发更改事件.有人能告诉我为什么会这样吗？

谢谢

Answer 1

HTML使用添加[innerHTML]="..."是不以任何方式受角和绑定,组件,没有为这种HTML创建指令处理.Angular对此类HTML的唯一看法是出于安全目的进行清理.

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

处理此类需求的一种方法是在运行时动态创建组件,并使用创建的HTML作为此类组件的模板.请参阅Angular 2中的$ compile等效项,了解如何完成此操作.

Answer 2

检查这个答案：/sf/answers/2360142501/

尝试：

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

Answer 3

你应该使用ngModelChange而不是change

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