Angular2:在Typescript

时间:2018-01-16 09:11:48

标签: javascript jquery angular 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);
  }

HTML:

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

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

  

$('labelDropdown')。on('change',e =&gt; this.onDropdownChange(e));

然而,this.onDropdownChange(e)永远不会被调用,或者只是在创建下拉列表时,而不是在更改值时。

有没有人知道如何在我的打字稿代码中的select中设置更改事件?

1 个答案:

答案 0 :(得分:2)

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

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