角2はonchangeでhtml要素を作成します

Question

私は選択の数に応じて異なる行数の折れ線グラフを表示するアプリケーションを持っています（選択された各フィールドにつき1行、最大5つの選択）。最初の2つはあらかじめ定義されているのでうまく動作しますが、私は（変更）= "関数"を指定できます。他の3つはオプションなので、htmlにselectを追加するボタンを追加しました。唯一の問題は、それらを動的に追加すると、グラフィックを再描画するはずの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ボタンの上の選択を追加することであり、それはdrawChartが存在しないことを言います。

<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要素の後にこのような何かを追加します。

htmlページは次のようになります。

<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で処理する方がよいでしょう。