合并两个 observables，单个输出 [英] Merge two observables, single output

问题描述

大家好，我正在尝试掌握 RxJS 库和响应式编程的整个概念.我正在尝试将两个 observables 合并为一个.第一个 observable 包含一个对象数组 DefectImages[]，第二个 observable 包含一个字符串数组，然后我将其转换为一个 DefectImages[] 数组.之后我想将这两个 observable 合二为一.

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

这种工作方式符合我的预期，但是这个合并的 observables 连接到 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>

我得到的控制台日志:

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

推荐答案

合并 observable 意味着由两个 observable 发出的项目将被新合并的 observable 依次单独发出，参见 此页面.如果您的 observable 每个只发出一个项目，并且您希望通过连接数组来合并 项目，您可以使用 zip 运算符如下:

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) 创建了一个新的 observable 来监听 obsa 和 obsb，并且在从 obsa 接收到 itema 和从 obsb 接收到 itema 后发出 item x=[itema,项].在您的情况下 x[0]=item, x[1]=item 是数组和 (x => x[0].concat(x[1])) 连接这两个数组.请注意，如果 obsa 和 obsb 发出多个数组，则压缩后的 observable 将在发出新的 [itema, item] 之前始终等待有一个来自 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.

并且不要忘记 import { zip } from 'rxjs' 和 import { map } from 'rxjs/operators'.

And don't forget to import { zip } from 'rxjs' and import { map } from 'rxjs/operators'.

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