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