代码之家 › 专栏 › 技术社区 › filemonczyk

合并两个观测值,单个输出

reactive-programming rxjs angular javascript

0

filemonczyk · 技术社区 · 7 年前

大家好,我试图掌握RXJS库和整个反应式编程的思想。我试图把两个观测值合并成一个。第一个可观测包含对象数组 DefectImages[] 第二个可观测包含字符串数组,然后我将其转换为 缺陷图像[] . 在那之后,我想把这两个观测值合并成一个。

以下是我的代码:

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角度模板。

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

这是我得到的控制台日志

我的问题是,为什么每个流有两个单独的日志,而不是一个合并了所有数据的控制台日志?

1 回复 | 直到 7 年前

1

Rolvernew 7 年前

this page . 如果你的观测结果只发出一个项目,你希望合并项目通过连接数组,可以使用 zip operator 如下:

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

更准确地说 zip(obsa, obsb) 创建一个监听obsa和obsb的新observate,并在从obsa接收到item a和itemb后发出该item x=[itema, itemb] . 以你为例 x[0]=itema , x[1]=itemb 数组和 (x => x[0].concat(x[1])) 连接这两个数组。请注意,如果obsa和obsb发出多个数组,压缩的obsa将始终等待obsa中的一个项和obsb中的一个项发出新的 [itema, itemb] . 对于concat()方法,cf this page .

别忘了 import { zip } from 'rxjs' 和 import { map } from 'rxjs/operators' .