Question

我有一个应用程序，根据选择的数量显示具有不同行数的折线图（每个选定字段为1行，最多为5个选择）。前两个工作非常好，因为它们是预定义的，我可以指定（更改）=＆＃34;功能＆＃34;。其他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>

Answer 1

在最后一个选择元素之后添加类似的内容。

<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：

https://plnkr.co/edit/p1WimIz3ygE2CSs2tmw2?p=preview

我认为你想要这样的东西。

你希望完全控制角度应用程序中的所有内容，最好有模板并找到完成所有操作的方法，而无需直接写入DOM并让角度处理DOM。

Angular 2使用onchange创建html元素

1 个答案: