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

我的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>

解决方法:

这应该适合你：

@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