Wie man Update DOM Ereignis mit eckigen fangen?

Question

Ich habe Tabelle und es gibt select2 Kontrolle in der Tischzelle. in ngAfterViewInit Methode, die ich so etwas wie jQuery('.select2Class').select2(...); Aufruf bin habe ich die Möglichkeit in Tabelle
neue Zeile hinzuzufügen nun der Code ist so etwas wie

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

Ich brauche setTimeout zu verwenden, da es kein Ereignis angularReady ist.
Ich weiß es ist schlecht, aber ich weiß nicht, wie es richtig geht.

Answer 1

Anstatt jQuery direkt wie jQuery('#newSelect2Id').select2(...); zu verwenden, erstellen Sie ein dediziertes benutzerdefiniertes Element, z. B. <select2-input></select2-input>.

Dann in der Komponente Vorlage hätten Sie normale *ngFor Directive Rendering-Zeilen. Etwas wie das:

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

Nun, über die Implementierung dieses benutzerdefinierten Elements. Die einfachste Implementierung wäre die Implementierung der OnInit Schnittstelle und die Initialisierung von nativeElement mit $.fn.select2 Plugin. Sie können auch notwendige Eingaben und Ausgaben implementieren, wie im obigen Beispiel möchten Sie wahrscheinlich einige select2 Optionen in Komponente übergeben und auf select2:select Ereignis reagieren.