大家好,我正在尝试掌握 RxJS 库和响应式编程的整个概念。
我正在尝试将两个 observables 合并为一个。第一个 observable 包含一个对象数组 DefectImages[]
,第二个 observable 包含一个字符串数组,然后我将其转换为一个 DefectImages[]
数组。之后,我想将这两个 observables 合并为一个。
在我的代码下面:
const observable = CachedPhotosBuffer.getInstance().asObservable()
.pipe(
switchMap(data => {
return data.map((url) => DefectImage.createTempImage(url, 'you', Date.now()));
})
);
this.observable = Observable.create(observer => observer.next(this.defectImages));
this.observable.pipe(
merge(observable)
).subscribe(data => console.log('merge', data))
这种工作方式与我预期的一样,但是这种合并的可观察对象连接到 HTML Angular 模板。
<ion-list>
**<ng-container *ngFor="let image of observable | async">**
<ion-item *ngIf="image.deletedAt === undefined">
<span class="item-container" (click)="showImage(image)">
<ion-thumbnail item-start>
<img id="{{image.url}}" src="{{getUrl(image) + image.url}}">
</ion-thumbnail>
<span>
<p>created at: {{image.createdAt | date: 'd/M/yy H:m'}}</p>
<p>created by: {{image.createdBy}}</p>
</span>
</span>
<button ion-button item-end (click)="removeImage(image)">
<ion-icon name="trash"></ion-icon>
</button>
</ion-item>
</ng-container>
</ion-list>
我的问题是为什么每个流都有两个单独的日志,而不是一个包含所有数据的控制台日志?
最佳答案
合并 observable 意味着由两个 observable 发出的项目将由新合并的 observable 连续且分别发出,cf this page .如果您的 observables 每个只发出一个项目,并且您希望通过连接数组来合并 项目,您可以使用 zip operator如下:
zip(observable, this.observable)
.pipe(map(x => x[0].concat(x[1])))
.subscribe(data => console.log('merge', data))
更准确地说,zip(obsa, obsb)
创建一个新的 observable 来监听 obsa 和 obsb,并且在从 obsa 接收到 itema 并从 obsb 接收到 itemb 之后,发出项目 x=[itema, item]
。在你的情况下 x[0]=itema
, x[1]=itemb
是数组并且 (x => x[0].concat(x[1 ]))
连接这两个数组。请注意,如果 obsa 和 obsb 发出多个数组,则压缩的 observable 将始终等待从 obsa 和 obsb 中获得一项,然后再发出新的 [itema, itemb]
。对于 concat() 方法,请参见 this page .
不要忘记import { zip } from 'rxjs'
和import { map } from 'rxjs/operators'
。
关于javascript - 合并两个 observables,单一输出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53419090/