rxjs - Akita 和 Rxjs 的 Angular 在外部 observable 内部存在 foreach 问题
问题描述
我是秋田的 Angular 新手。
我有一个应用程序,用户在其中加载并设置在商店中。所有用户都有一个初始 imageUrl 属性设置为例如:'http://testxxxxxx' 该组件查询所有用户的商店,并通过管道调用一个循环遍历每个人的方法,进行 api 调用以获取“blob”图像响应从 api,并使用人员的 imageUrl = 'blob:http:2fk2fjadkf' 和组件设置 <img src='imageUrl' 更新商店。
但是由于某种原因,外部 observable 内部的方法循环了很多次。不知道为什么。
这是我的代码:
零件:
peopleToShow$ = this.peopleFacade.peopleToShow$;
Component.html 使用 peopleToShow$ 和每个人的 imageUrl 属性。现在它没有采用在 this.loadImagesAsBlobs 中设置的更新的 blob url
正面:
peopleToShow$ = this.peopleQuery.peopleToShow$
.pipe(
tap((people) => this.loadImagesAsBlobs(people))
);
private loadImagesAsBlobs(people: Person[]) {
people.forEach((person) => {
if (!person.isUrlChecked) {
this.imageDataService
.getAndStoreImageOnClient(person.imageUrl)
.pipe(
take(1),
switchMap((safeUrl) => {
this.updatePersonWithBlobImageUrl(person.id, safeUrl);
return EMPTY;
}),
catchError(() => {
this.updatePersonWithBlobImageUrl(person.id, null);
return EMPTY;
})
)
.subscribe();
}
});
}
private updatePersonWithBlobImageUrl(id: number, blobUrl: SafeUrl) {
this.peopleStore.updatePersonWithBlobImageUrl(id, blobUrl as string);
}
谢谢
解决方案
它不在这段代码中,但是当我遇到这个问题时,那是因为我有多个东西在监听一个 observable,这意味着这一切都发生了好几次。
修复,改变
peopleToShow$ = this.peopleQuery.peopleToShow$
.pipe(
tap((people) => this.loadImagesAsBlobs(people))
);
至
peopleToShow$ = this.peopleQuery.peopleToShow$
.pipe(
tap((people) => this.loadImagesAsBlobs(people)),
share()
);
或者shareReplay(1)
,如果您担心在设置下游的所有内容之前会发出 peopleToShow$ ,请改用。
推荐阅读
- django - 添加handler404后找不到Django根路径
- android - ShapeableImageView 有黑色背景,不圆角
- android - 为什么 BluetoothSocket.getMaxReceivePacketSize() 和 BluetoothSocket.getMaxTransmitPacketSize() 返回 0?
- python - 使用 BeautifulSoup 抓取的数据与源代码不匹配
- css - CSS - 如何使用渐变颜色制作锥形
- swift - 视图的消失动画不会与容器一起移动
- pine-script - 创建一个变量,该变量将存储图表上所有柱的整数数量
- reactjs - Framer 运动退出动画也在映射的反应 div 元素上播放
- angular - Angular Datastore 未更新 Mat-Table
- c# - 如何将 UIAutomationClient.dll 和 UIAutomationTypes.dll 添加到 .Net Core 5.0 项目?