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

Posted 2023-03-13

【中文标题】角度 2（更改）事件未触发

【英文标题】：angular 2 (change) event not firing

【发布时间】：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)，只要有就会触发用户输入的一些变化

【参考方案1】：

您应该使用 ngModelChange 而不是 change

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

【参考方案2】：

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

试试：

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

【讨论】：

感谢您回复我，但似乎仍然无法正常工作。如果我执行以下操作，但我需要使用 ts 动态添加它：

HTML 代码：Select prod选择>

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