Question

我在我的打字稿代码中动态创建下拉列表。这完全没问题。但是，我无法弄清楚如何为下拉列表设置“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中设置更改事件？

Answer 1

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

另一件事是，角度的变化将适用于实际选择或其他任何东西。所以你可以使这个组件实现，例如自定义输入控件。然后你可以挂钩组件中的（更改）或（ngModelChange）事件。

Angular2：在Typescript

1 个答案: