Angular *ngFor 渲染异步吗？

Question

在下面的代码中，这行this.images = response.map( r => r.url).slice(0,10); 填充images数组，然后ngFor在视图中呈现数据。 之后，将调用 Jquery 函数来初始化图像滑块，但该函数需要在timeout才能在使用ngFor呈现 HTML 元素时暂停。

我认为ngFor是同步的，这意味着当images数组获取其数据时， ngFor会呈现 HTML，然后ngFor Jquery 函数。 但它看起来不像那样。

import { Component, VERSION } from '@angular/core';
import {HttpClient} from '@angular/common/http';

declare var $ : any;

@Component({
  selector: 'my-app',
  template: `
        <div class="galeria">
            <div *ngFor="let img of images"><img src="{{img}}" ></div>
        </div>
              `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  images= [];

  constructor(private http: HttpClient){}

  ngOnInit(){
    this.loadImages();
  }

  loadImages(){
    this.http.get('https://jsonplaceholder.typicode.com/photos')
    .subscribe((response : any[]) => {
      
          this.images = response.map( r => r.url).slice(0,10);

          setTimeout(()=> this.loadGalery(),10);
    });
  }


loadGalery(){
    $('.galeria').bxSlider({
      mode: 'fade',
      captions: false,
      slideWidth:900,
      speed:700,
      infiniteLoop: true,
      auto: true,
      pager: true,
    });
}
}

现场示例 Stackblitz

Answer 1

您暂停 10 毫秒以等待 angular 完成渲染，但当然可能需要更长的时间。 在 CPU 较弱的设备上，它可能比在您的机器上花费的时间更长，因此这种方法不是很可靠。

您可以尝试在ngAfterViewChecked生命周期钩子中执行 jquery（参见https://angular.io/guide/lifecycle-hooks ）

Answer 2

更改检测周期必须在渲染完成之前完成。 设置超时将在宏任务队列上推送回调，并将在 DOM 更新后执行。