有两个相互依赖的变量(颜色和图片)。 取决于以下含义:当可变颜色的值为'BLUE'时,我要过滤所有具有蓝色等颜色的图像。 可变图片是带有服务/后端调用的主题:
this.colorSubject.subscribe((color) => {
subject.switchMap((searchTerm: string) => serviceCall(searchTerm, color) ).subsribe(...)
});
为此,我需要侦听color变量的更改,然后调用上面的代码行。 但这会导致服务的多次调用。
有什么想法可以解决这个问题吗?
答案 0 :(得分:0)
如果我对您的理解正确,则需要第三个流来表示color
和pictures
的合并结果。我们称之为filteredPictures$
。该流应使用color
使用pictures
和combineLatest
。现在,如果两个流中的任何一个发生更改,filteredPictures$
都会将所有新值通知所有订户。
const {
Subject,
from,
combineLatest
} = rxjs;
const {
withLatestFrom,
switchMap
} = rxjs.operators;
const color = new Subject();
const pictures = new Subject();
function service(searchTerm = "house", colorTerm = "green") {
return Promise.resolve([`${searchTerm}.jpg`, `${colorTerm}.png`]);
}
const color$ = color.asObservable();
const pictures$ = pictures.asObservable();
const filteredPictures$ = combineLatest(
pictures$,
color$
).pipe(switchMap(([searchTerm, colorTerm]) => from(service(searchTerm, colorTerm))));
filteredPictures$.subscribe(console.log);
pictures.next("water");
setTimeout(() => {
color.next("yellow");
setTimeout(() => {
pictures.next("helicoptor");
setTimeout(() => {
color.next("red");
}, 1000);
}, 1000);
}, 1000);
<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.min.js"></script>