typescript 角度 2（更改）事件未触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43883920/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angular 2 (change) event not firing
提问by aej1973
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");
}
I am able to insert the select menu in my html page but the change event is not being triggered with I select an item. Can someone let me know why this is happening?
我可以在我的 html 页面中插入选择菜单，但是我选择一个项目时不会触发更改事件。有人可以让我知道为什么会这样吗？
Thanks
谢谢
回答by Günter Z?chbauer
HTML added using [innerHTML]="..."is notprocessed in any way by Angular and bindings, components, directives are not created for such HTML.
The only thing Angular does with such HTML is sanitization for security purposes.
HTML使用添加[innerHTML]="..."是不以任何方式受角和绑定，组件，指令不用于这种HTML创建处理。Angular 对此类 HTML 所做的唯一一件事就是出于安全目的进行清理。
Therefore, you can't use [ngModel]="..."or (ngModelChange)="..."
因此，您不能使用[ngModel]="..."或(ngModelChange)="..."
One way to deal with such requirements is to dynamically create components at runtime and use the created HTML as a template for such a component. See Equivalent of $compile in Angular 2on how this can be done.
处理此类需求的一种方法是在运行时动态创建组件并使用创建的 HTML 作为此类组件的模板。有关如何完成此操作，请参阅Angular 2 中的 $compile 等效项。
回答by Malick
Check this answer: https://stackoverflow.com/a/33716321/2114024
检查这个答案：https: //stackoverflow.com/a/33716321/2114024
Try:
尝试：
<select [ngModel]='selectedProduct'
class='form-control'
[id]='"+ selectProduct.attribute +"'
(ngModelChange)='selectNextAttr($event)' name='selectProd'>
回答by Sajeetharan
You should use ngModelChangeinstead of change
你应该使用ngModelChange而不是change
"<select class='form-control' id='"+ selectProduct.attribute +"' (ngModelChange)='selectNextAttr($event)' name='selectProd'>"
回答by user2306594
Your method:
你的方法：
selectNextAttr(attr, val) {
console.log("this is a test");
}
This is expecting 2 parameters, whereas in the usage you have passed only one:
这需要 2 个参数，而在使用中您只传递了一个参数：
var select = "<select class='form-control' id='"+ selectProduct.attribute +"' (change)='selectNextAttr($event)' name='selectProd'>";
If you want to get only the value of the selected item, change method signature as below.
如果您只想获取所选项目的值，请更改方法签名，如下所示。
selectNextAttr(event) {
// this will give the selected item value.
console.log("this is a test", event.target.value);
}
