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示例