gpt4 book ai didi

javascript - Angular 5 - 另一个观察者内部的观察者循环 - 有效的方法

转载 作者:行者123 更新时间:2023-11-28 12:54:28 24 4
gpt4 key购买 nike

我有一个“get”调用,它返回包含用户 ID 和名称的用户列表。调用成功后,我需要再次调用休息,让每个用户带上他的照片。

目前我正在这样做-

组件-

users;
userPhotos = {};

constructor(private dashboardService: DashboardService) {
this.dashboardService.bringUsers().subscribe((data) =>{
this.users = data;
this.users.forEach((user) => {
this.dashboardService.getPicture(user.userID).subscribe((data) => {
if (data){
this.userPhotos[user.userID] = window.URL.createObjectURL(data);
} else {
this.userPhotos[user.userID] = '';
}
});
});
});
}

在我的 html 中-

<ng-container *ngFor="let user of users">
<div>
{{user.displayName}}
</div>

<display-picture [image]="userPhotos[user.userID]"></display-picture>
</ng-container>

其中display-picture是一个仅呈现图像的组件。

有没有使用rxjs的有效方法来做到这一点?

最佳答案

from 迭代每个用户,并且可以在此处使用 mergeScan 来执行可观察量。为了清楚起见,我将其分为两个函数。您还可以使用 mergeScan 控制并发数

    const getUserPic=users=>from(users).pipe(
mergeScan((acc, curr:any) =>
getPicture(curr.userID).pipe(map(photo => {
acc[curr.userID] = photo
return acc
}))
,{})
)

bringUsers().pipe(
tap(users=>this.users=users),
switchMap(users=> getUserPic(users)),
last()
).subscribe(console.log)

https://stackblitz.com/edit/rxjs-1bt172

关于javascript - Angular 5 - 另一个观察者内部的观察者循环 - 有效的方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56947479/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com