Javascript Angular2：为Typescript中的select设置更改属性

我在typescript代码中动态创建下拉列表。那很好用。但是，我不知道如何为下拉列表设置“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);
  }

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（设i=0；i<8；i++）{
const opt:any=document.createElement（'option'）；
opt.setAttribute（'text'，this.labels[i].value）；
opt.setAttribute（'value'，字符串（this.labels[i].id））；
opt.innerText=this.labels[i].value；
选择附加儿童（opt）；
}
父母子女（sel）；
}
公共交通服务收费（e）{
console.log（'event'，e）；
}

html:

我尝试了几种方法，最后一种是

$（'labelDropdown'）.on（'change'，e=>this.onDropdownChange（e））

但是，永远不会调用此.onDropdownChange（e），也不会在创建下拉列表时调用，也不会在更改值时调用

---

有人知道如何在我的typescript代码内的select上设置更改事件吗？

您正在做许多与推荐的Angular方法相反的事情。在本例中，您使用jQuery添加HTML，因此Angular不知道这些组件。如果你钩住了常规的JavaScript事件，这超出了angular的知识范围。您可以将其包装在一个区域中，并进行一些重构。或者，您也可以使用推荐的方法来执行此操作—创建一个angular下拉组件（可以是jQuery的简单包装器），并创建一个动态注入此组件的注入器

---

另一件事是angular的变化会对实际的select或任何东西起作用。因此，您可以使该组件实现自定义输入控件。然后，您可以在组件中挂接它的（更改）或（ngModelChange）事件。

您可以在下拉列表的

（更改）

期间发出事件，但是如何设置下拉列表的

HTML

中的select的（更改）属性？它仍然不会触发。这是jQuery创建的HTML节点，Angular不知道如何绑定到它。但是如何获取更改事件呢？有没有办法？你能给我举个例子，说明如何以角度的方式创建它，然后设置“（change）”或“（ngModelChange）”属性吗？因为我以前也尝试过，而且它似乎对meTotally agree不起作用，angular旨在从开发人员那里抽象（大部分）直接DOM操作。对于组件的动态解析，请看这里，对于带有值访问器的自定义组件，我同意@Jota.Toledo所说的。特雷克斯，你在这里要做的三件事是分开的。第一：创建一个动态注入的组件。在google上，angular.io上，或者在这里，查找大量的示例，然后如果您被特定的代码卡住了，请发布另一个问题。第二，尽量不要在角度项目中使用jQuery。这样最好。如果您无法避免它，或者不能立即避免，那么您可以尝试在区域中包装jQuery代码，看看会发生什么。这也是一个广泛的话题，可能会扩展到许多问题：）第三，创建自定义输入。

  <div style="width: 100%" id="dropdown-container">
  </div>