2016-06-27 9 views
2

テーブルを持っていて、テーブルセルにselect2コントロールがあります。私は今のコードは、私は何のイベントangularReadyがないためsetTimeoutを使用する必要がDOMイベントを角度で更新するには?

addNewRow(){ 
    this.rows.push({name:'new row'}); 
    setTimeout(function(){ 
     jQuery('#newSelect2Id').select2(...); 
    },10); 
} 

のようなものであるテーブル
に新しい行を追加する可能性を持っているjQuery('.select2Class').select2(...); のようなものを呼んでいるngAfterViewInit方法で 。
私はその悪いことを知っていますが、私は正しい方法を知らない。

答えて

3

jQuery('#newSelect2Id').select2(...);のようにjQueryを直接使用する代わりに、専用のカスタム要素を作成してください(例:<select2-input></select2-input>)。

コンポーネントテンプレートでは、通常の*ngForディレクティブレンダリング行があります。このようなもの:

<tr *ngFor="let row of rows"> 
    <td> 
    <select2-input 
     [options]="select2Options" 
     (select)="row.selectedOption = $even.value" 
    ></select2-input> 
    </td> 
</tr> 

今、このカスタム要素の実装についてです。最も簡単な実装は、OnInitインターフェイスを実装し、nativeElement$.fn.select2プラグインで初期化するだけです。上記の例のように、必要な入出力を実装することもできます。おそらく、select2オプションをいくつかコンポーネントに渡し、select2:selectイベントに反応させたいでしょう。

+0

ありがとう –

関連する問題