Javascript Angular 2使用onchange创建html元素

我有一个应用程序，它会显示一个线条图，根据选择的数量不同，每个选择的字段有一行，最多5行。前两个非常好用，因为它们是预定义的，我可以指定change=function。另外3个是可选的，因此我添加了一个按钮，用于将选择添加到html中。唯一的问题是，当我动态添加这些选择时，它们没有使用onchange函数，该函数应该重新绘制图形

以下是我的代码示例：

add() {

      var child = document.getElementById('addField');
      var selectList = document.createElement("select");

      if (child.previousElementSibling) {
          selectList.id = "field" + (parseInt(child.previousElementSibling.id.charAt(child.previousElementSibling.id.length-1)) + 1);
          selectList.innerHTML = selectList.innerHTML + child.previousElementSibling.innerHTML;
      }
      else {
          selectList.id = "field" + (parseInt(child.previousElementSibling.id.charAt(child.previousElementSibling.id.length-1)) + 1);
          selectList.innerHTML = selectList.innerHTML + child.previousElementSibling.innerHTML;
      }

      if(parseInt(selectList.id.charAt(selectList.id.length-1)) > 5)
        alert("Maximum number of parameters is : 5");
      else {
        selectList.setAttribute('onchange', "drawChart()");
        child.parentNode.insertBefore(selectList, child);
      }

    }

此函数用于在addField按钮上方添加select，表示drawChart不存在

html页面如下所示：

<div id="principal">
<label>Parameters :</label>
    <select id="field1" (change)="drawChart()">
        <option *ngFor="let pos of array"
            [value] = "pos.name"
            [selected]="pos.name == 'def'">
            {{pos.name}}
        </option>
    </select>
    <select id="field2" (change)="drawChart()">
        <option *ngFor="let pos of array"
            [value] = "pos.name"
            [selected]="pos.name == 'def2'">
            {{pos.name}}
        </option>
        </select>
    <input type="button" class="button" id="addField" value="Add Field" (click)="add()"/>
</div>

---

只需在最后一个select元素之后添加类似的内容

<select id="{{extraItem.id}}" *ngFor="let extraItem of extraFields" (change)="drawChart()">
    <option *ngFor="let child of extraItem.children"
             [value] = "child.name"
             [selected]="child.name == 'Opt 2 - 1'">
             {{child.name}}
    </option>
</select>

检查此plunker：

我想你想要这样的东西

---

如果你想完全控制angular应用程序中的所有内容，最好使用模板，找到不直接写入DOM的方法，让angular处理DOM。

为什么要直接写入DOM？使用模板。drawChart无法工作，因为您不是在同一上下文上工作，onchange正在等待window.drawChart函数。这不是执行此操作的方式。您还应该在模板中定义动态元素，并使用*ngIf=showOptional向其添加一些条件。例如，如何在组件中定义动态元素@cy3erYes@camaron我知道它们是不同的上下文。但我是angular 2的新手，所以我希望有人能给我一些启发。我有一个图形页面的模板，在中间的某个地方有选择。我应该在哪里使用模板以及如何使用？这看起来根本不像是有角度的。这是怎么回事？就这样！非常感谢你的帮助。这是一个更干净的代码，我不必访问DOM，因为DOM在angular 2中不是很安全。