Angular 2（change）事件未触发

Question

I have the following function in my component:

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

谢谢。

- aej1973

---

请分享您的HTML代码。 - Jayakrishnan

当然，Angular 2中的“(change)”事件存在问题。如果你仔细观察，它的作用与“(blur)”相同。但是，您可以使用“(ngModelChange)”触发器，只要用户输入有任何变化就会立即触发。 - mayur

Answer 1

使用[innerHTML]="..."添加的HTML不会被Angular和绑定、组件、指令处理，这种HTML不会被创建为Angular组件。 Angular对这种HTML做的唯一处理是为了安全目的进行的净化。

因此，你不能使用[ngModel]="..."或(ngModelChange)="..." 解决这种需求的一种方法是在运行时动态创建组件，并使用所创建的HTML作为该组件的模板。 请参见Angular 2中的编译等效方法，了解如何完成此操作。

- Günter Zöchbauer

Answer 2

请查看这个答案：https://dev59.com/AFsX5IYBdhLWcg3whv7Q#33716321

尝试如下：

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

- Malick

---

谢谢您回复我，但似乎仍然无法正常工作。如果我按照以下方式操作，则可以正常工作，但我需要使用ts动态添加此内容： - aej1973

HTML 代码：<select class="form-control" id="{{selectProduct.attribute}}" (change)="selectNextAttr(selectProduct.attribute,selectProduct.product_id)" name="selectProd"> <option value="0">选择</option> <option *ngFor = "let prod of selectProduct.values" value="{{prod}}">{{prod}}</option>
</select> - aej1973

TS: onProductSelect(e){ //var attrs = document.getElementById('firstAttr');
return this.groupComponentSvs.getProduct(e.target.value) .subscribe( selectProduct=>{
this.selectProduct=selectProduct;
error=>this.errorMessage = <any>error }
) } - aej1973

Answer 3

你应该使用ngModelChange而不是change

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

- Sajeetharan

Answer 4

你的方法：

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

这里需要传入两个参数，但在使用时只传了一个：

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);
}

- Narender Gandi