Объединить две наблюдаемые, один выход

Question

Привет, ребята. Я пытаюсь понять библиотеку RxJS и идею реактивного программирования.Я пытаюсь объединить две наблюдаемые в одну.Первая наблюдаемая содержит массив объектов DefectImages[], вторая наблюдаемая содержит массив строк, которые затем я конвертирую в массив 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>

Это журналы консоли, которые я получаю

Мой вопрос: почему у меня два отдельных журнала для каждого потока вместо одногоконсольный журнал со всеми данными в сочетании?

Answer 1

Объединение наблюдаемых означает, что элементы, испускаемые обоими наблюдаемыми, будут испускаться последовательно и отдельно новой объединенной наблюдаемой, см. на этой странице .Если ваши наблюдаемые объекты излучают только один элемент каждый, и вы хотите объединить элементы путем объединения массивов, вы можете использовать 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, и после получения итемы от obsa и itemb от obsb испускает элемент x=[itema, itemb].В вашем случае x[0]=itema, x[1]=itemb являются массивами, а (x => x[0].concat(x[1])) объединяет эти два массива.Обратите внимание, что если obsa и obsb испускают более одного массива, наблюдаемая в zip-формате всегда будет ждать получения одного элемента из obsa и одного из obsb, прежде чем выдать новый [itema, itemb].Для метода concat (), cf эта страница .

И не забудьте import { zip } from 'rxjs' и import { map } from 'rxjs/operators'.