我在我的打字稿代码中动态创建下拉列表。这完全没问题。但是,我无法弄清楚如何为下拉列表设置“onchange”事件 - 以便在下拉列表的值发生更改时触发它。
到目前为止,这是我的ts代码:
private createDropDown() {
const parent = document.getElementById('dropdown-container');
const sel: any = document.createElement('select');
sel.setAttribute('id', 'bbCount' + this.bbCount);
sel.setAttribute('class', 'labelDropdown');
$('labelDropdown').on('change', e => this.onDropdownChange(e));
for (let i = 0; i < 8; i++) {
const opt: any = document.createElement('option');
opt.setAttribute('text', this.labels[i].value);
opt.setAttribute('value', String(this.labels[i].id));
opt.innerText = this.labels[i].value;
sel.appendChild(opt);
}
parent.appendChild(sel);
}
public onDropdownChange(e) {
console.log('event', e);
}
HTML:
<div style="width: 100%" id="dropdown-container">
</div>
我尝试了几种方法,最后一种方法是
$('labelDropdown')。on('change',e =&gt; this.onDropdownChange(e));
然而,this.onDropdownChange(e)永远不会被调用,或者只是在创建下拉列表时,而不是在更改值时。
有没有人知道如何在我的打字稿代码中的select中设置更改事件?
答案 0 :(得分:2)
你正在做很多事情与推荐使用Angular的方法相悖。在这个例子中,你用jQuery添加HTML,因此Angular不会知道这些组件。如果你挂钩常规的JavaScript事件,那就超出了angular的知识。您可以将其包装在一个区域中,并进行一些重构。或者您可以按照推荐的方式执行此操作 - 创建 angular 下拉组件(可以是jQuery的简单包装器),并创建一个动态注入此组件的注入器。
另一件事是,角度的变化将适用于实际选择或其他任何东西。所以你可以使这个组件实现,例如自定义输入控件。然后你可以挂钩组件中的(更改)或(ngModelChange)事件。