在Angular 9中,为什么我的订阅是顺序加载而不是并行加载? [英] In Angular 9, why are my subscriptions getting loaded sequentially instead of in parallel?
问题描述
我正在使用Angular9.我想加载一系列对象,每个对象都有图像数据.我想先加载所有对象,然后再加载图像数据.我的component.ts文件ngOnInit中有这个文件...
I'm using Angular 9. I want to load a series of objects, each of which has image data. I would like to load all the objects, first, and then load the image data after. I have this in my component.ts file ngOnInit ...
ngOnInit(): void {
this.authService.getAllinLibrary().subscribe((res: any[]) => {
this.results = res;
...
for (let i = 0; i < results.length; i++) {
this.getTheImage(res[i].Id, i);
}
});
getTheImage(imageId: number, index: number) {
this.authService.getPersonImage(imageId).subscribe(data => {
this.createImageFromBlob(data, index);
this.isImageLoadingArr[index] = false;
console.log("loaded image:" + index);
}, error => {
this.isImageLoadingArr[index] = false;
console.log(error);
});
}
我像这样在我的组件中显示数据
I display the data in my component like so
<mat-grid-tile *ngFor="let person of results; let i = index;" class="animated flipInX">
<div class="image-background">
<img [src]="images[i]"
alt="" width="100%">
似乎并非所有并发运行加载图像数据的调用.也就是说,每次我都会收到日志消息
It seems that all the calls to load the image data are not being run concurrently. That is, every time, I get the log messages
loaded image: 0
loaded image: 1
loaded image: 2
loaded image: 3
loaded image: 4
....
按顺序打印,使我相信调用不会并发执行.如何修改我拥有的内容,以使获取图像源的调用并发执行,而不是一次执行?
printed in sequential orde, leading me to believe the calls aren't getting executed concurrently. How do I modify what I have so that the calls to get the image sources get executed concurrently and not one at a time?
推荐答案
我认为最好的方法是实现forkJoin Rxjs规范:
I think the best appraoch is to implement forkJoin Rxjs specifications :
this.authService.getAllinLibrary().subscribe((res: any[]) => {
this.results = res;
...
let observableBatch = [];
results .forEach(( componentarray, key ) => {
observableBatch.push( this.getTheImage(res[key ].Id, key); );
});
const getImagesObservable= forkJoin(observableBatch );
getImagesObservable.subscribe({
next: value => your Implementation Here
complete: () => console.log('This is how it ends!'),
});
});
这篇关于在Angular 9中,为什么我的订阅是顺序加载而不是并行加载?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!