合并两个可观察对象，单个输出 [英] Merge two observables, single output

问题描述

大家好，我试图了解RxJS lib和反应式编程的整个思想.我正在尝试将两个可观察值合并为一个.第一个可观察对象包含对象数组 DefectImages [] ，第二个可观察对象包含字符串数组，然后将其转换为 DefectImages [] 数组.之后，我想将这两个可观察值合并为一个.

Hello guys I'm trying to grasp RxJS lib and the whole idea of reactive programming. I'm trying to merge two observables into one. First observable contains an array of objects DefectImages[] the second observable contains an array of strings, which then I convert to an array of DefectImages[]. After that I would like to merge these two observables into one.

在我的代码下面:

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模板.

This KIND OF works as I expect BUT this merged observables Is connected to HTML Angular template.

<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>

我得到的控制台日志:

Console logs that I'm getting:

我的问题是，为什么每个流都有两个单独的日志，而不是一个控制台日志包含所有数据?

推荐答案

合并可观察对象意味着，由两个可观察对象发出的项目将由新合并的可观察对象(分别参见

Merging observables means that items emitted by both observable will be emitted successively and separately by the new merged observable, cf this page. If your observables emit just one item each and you want the merge the items by concatenating the arrays, you could use the zip operator as follows:

zip(observable, this.observable)
  .pipe(map(x => x[0].concat(x[1])))
  .subscribe(data => console.log('merge', data))

更精确地讲， zip(obsa，obsb)创建了一个新的可观察对象，它监听obsa和obsb，并且在收到obsa的itema和obsb的itemb之后，会发出 x = [itema，itemb] .在您的情况下， x [0] = itema ， x [1] = itemb 是数组，而(x => x [0] .concat(x [1]))连接这两个数组.请注意，如果obsa和obsb发出多个数组，则在发出新的 [itema，itemb] 之前，压缩的可观察对象将始终等待obsa中的一项和obsb中的一项.对于concat()方法，请参见此页面.

More precisely zip(obsa, obsb) creates a new observable that listens to obsa and obsb, and after receiving itema from obsa and itemb from obsb emits the item x=[itema, itemb]. In your case x[0]=itema, x[1]=itemb are arrays and (x => x[0].concat(x[1])) concatenates these two arrays. Note that if obsa and obsb emit more than one array, the zipped observable will always wait to have one item from obsa and one from obsb before emitting a new [itema, itemb]. For the concat() method, cf this page.

别忘了从'rxjs'导入{zip} 和从'rxjs/operators'导入{map} .

这篇关于合并两个可观察对象，单个输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！