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

使用[innerHTML]="..."添加的HTML 不由Angular以任何方式处理，并且不会为此类HTML创建组件，指令。 Angular对此类HTML的唯一考虑是出于安全目的进行清理。

因此，您无法使用[ngModel]="..."或(ngModelChange)="..."

处理此类需求的一种方法是在运行时动态创建组件，并使用创建的HTML作为此类组件的模板。有关如何完成此操作，请参阅Equivalent of $compile in Angular 2。

Answer 2

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

尝试：

<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'>"

Answer 4

您的方法：

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

这需要2个参数，而在用法中，您仅传递了一个：

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

如果只想获取所选项目的值，请按如下所示更改方法签名。

selectNextAttr(event) {
  // this will give the selected item value.
  console.log("this is a test", event.target.value);
}

角度2（变化）事件未触发

4 个答案: