Угловой 2 вызов jQuery после элементов рендеринга - после использования API

Question

Приложение My Angular2 использует RESTful API, а затем создает кучу <select> элементов на основе результата. Я пытаюсь вызвать функцию jQuery для этих элементов <select>, но похоже, что функция jQuery выполняется слишком поздно. Я попытался поставить функцию в ngAfterContentInit, но это не сработало. Поместив его в ngAfterViewChecked, я застал мой браузер.

После того, как страница отобразилась, если я вставляю функцию jQuery в консоль, все работает, поэтому я знаю, что моя функция и все функциональны. Их порядок, вероятно, перепутался или что-то в этом роде.

В моем компоненте:

ngOnInit() { 
    this.myService.getAll().subscribe(
      data => this._data = data, 
      error => this._error = "invalid."); 
} 

ngAfterViewInit() { 
    $("select").select2(); // <--- jQuery function I need to execute after rendering 
} 

В моем шаблоне:

<select *ngFor="let d of _data">...blah blah</select> 

Answer 1

Это должно работать для вас:

@ViewChild('select') selectRef: ElementRef; 
constructor(private myService: MyService, private ngZone: NgZone) {} 

ngOnInit() { 
    this.myService.getAll().subscribe(data => { 
    this.options = data; 
    // waiting until select options are rendered 
    this.ngZone.onMicrotaskEmpty.first().subscribe(() => { 
     $(this.selectRef.nativeElement).select2(); 
    }); 
    }); 
} 

Plunker Example