Angular 2在渲染元素后调用jQuery - 在使用API​​之后

Question

我的Angular2应用程序使用RESTful API，然后根据结果创建一堆<select>元素。我试图在这些<select>元素上调用jQuery函数，但看起来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