角度 2（更改）事件未触发答案

【问题标题】：angular 2 (change) event not firing角度 2（更改）事件未触发
【发布时间】：2017-10-08 14:20:00
【问题描述】：

我的组件中有以下功能：

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

谢谢

【问题讨论】：

请分享您的 HTML 代码
是的，肯定 Angular 2 中的 (change) 事件存在问题。如果您仔细注意，它的工作方式与 (blur) 相同。是的，您可以使用 (ngModelChange)，只要有就会触发用户输入的一些变化

标签： angular typescript

【解决方案1】：

您应该使用 ngModelChange 而不是 change

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

【讨论】：

【解决方案2】：

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

试试：

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

【讨论】：

感谢您回复我，但似乎仍然无法正常工作。如果我执行以下操作，但我需要使用 ts 动态添加它：
HTML 代码：
TS:onProductSelect(e){ //var attrs = document.getElementById('firstAttr'); return this.groupComponentSvs.getProduct(e.target.value) .subscribe(selectProduct=>{ this.selectProduct=selectProduct; error=>this.errorMessage = error }) }

【解决方案3】：

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

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

处理此类需求的一种方法是在运行时动态创建组件，并将创建的 HTML 用作此类组件的模板。请参阅 Equivalent of $compile in Angular 2 了解如何做到这一点。

【讨论】：

【解决方案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);
}

【讨论】：