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

您应该使用ngModelChange，而不是change

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

Answer 2

检查这个答案：https://stackoverflow.com/a/33716321/2114024

尝试：

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

Answer 3

使用“…”添加HTML，并且不会为此类HTML创建绑定、组件和指令。Angular对此类HTML所做的唯一一件事就是出于安全目的进行清理。

因此，您不能使用ngModel=“..” 或<代码>（ngModelChange）=“…”

处理此类需求的一种方法是在运行时动态创建组件，并使用创建的HTML作为此类组件的模板。请参阅Angular 2中的等效$compile，了解如何实现这一点。