Angular2：為Typescript中的select設置更改屬性

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 => this.onDropdownChange（e））;

但是，永遠不會調用this.onDropdownChange（e）或僅在創建下拉列表時調用，而不是在更改值時調用。

有誰知道我如何在打字稿代碼中的select上設置change事件？

Answer 1

您正在做很多事情，與推薦的Angular方法背道而馳。 在此示例中，您將使用jQuery添加HTML，因此Angular將不了解這些組件。 而且，如果您鈎住常規的JavaScript事件，則超出了angular的了解。 您可以將其包裝在一個區域中，並進行一些重構。 或者，您也可以按照推薦的方式進行操作-創建一個有角度的下拉組件（可以是jQuery的簡單包裝器），並創建一個可以動態注入該組件的注入器。

另一件事是，角度的更改將對實際的選擇有效。 因此，您可以使該組件實現例如自定義輸入控件。 然后，您可以在組件中掛鈎到它的（change）或（ngModelChange）事件。