Angular*ngFor渲染是异步的吗

Question

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

我认为ngFor是同步的，这意味着当images数组获得数据时，ngFor会呈现HTML，然后调用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,
});
}
}

Stacklitz 实例

Answer 1

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

您可以尝试在ngAfterViewChecked生命周期挂钩中执行jquery(请参阅https://angular.io/guide/lifecycle-hooks)

Answer 2

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