RxJS Наблюдаемый никогда не завершается (угловой)

Question

Мой поток определен следующим образом

export class MyComponent implements OnInit {
  things$: Observable<Thing[]>;

  constructor(private fooService: FooService) {
  }

  ngOnInit() {
    this.things$ = this.fooService.getFoos() // Observable<Foo[]>
                      .pipe(
                        mergeAll(),
                        map(foo => this.thingService.getThing(foo.thingId)), // Observable<Thing>
                        zipAll()
                      );

  }
}

То, чего я хочу достичь, это

1. Разделить мои Foo[] на последовательность единичных Foo с mergeAll
2. Получите по одному Thing за каждый Foo с map
3. Объединить все мои Thing с Thing[], используя zipAll

Теперь вот мой шаблон

<div *ngIf="(things$ | async) as things; else loading">
  <ng-container *ngIf="things.length">
    <div *ngFor="let thing of things">
      {{ thing.someAttr }}
    </div>
  </ng-container>
</div>

<div #loading>LOADING</div>

Как видно из заголовка, я застрял в состоянии загрузки, и асинхронный канал никогда не разрешается. Что я делаю не так?

Answer 1

Подход, вероятно, будет немного другим. Поскольку сама Observable содержит массив, вам нужно будет обрабатывать его в функции карты. В этом случае не понадобятся mergeAll и zipAll.

this.things$ = this.fooService.getFoos() // Observable<Foo[]>
    .pipe(
        map(foos => {
            let temp = [];
            foos.forEach(function(foo) {
                temp.push(this.thingService.getThing(foo.thingId));
            });
            return temp;
        });