Angular RxJS объединяет синхронизацию, асинхронность и forkJoin в одном потоке Subject

У меня довольно сложное реактивное поведение, которого я хотел бы добиться с помощью RxJS, но пока не нашел подходящего решения.

В моем приложении angular, которое можно найти в Plnkr, у меня есть серия синхронного, асинхронного и параллельного асинхронного выполнения.

1. Сначала пользователь нажимает кнопку, которая вызывает следующий мой RxJS Subject. userClick$ = new Subject<void>();.

   <button (click) = "model.on = !model.on; userClick$.next()"> {{ model.on ? 'Stop' : 'Start' }} </button>

2. затем я предоставляю случайное число, используя getRandomNumber
3. затем я вычисляю экспоненту этого случайного числа с помощью getExpNumber
4. Наконец, мне нужно запустить getFloor и getCeil параллельно.

Что мне нужно?

• Уметь использовать forkJoin в последних двух параллельных выполнениях # 4.
• Уметь выразить зависимость # 3 от # 2 и # 4 от # 3:
  • getExpNumber зависит от getRandomNumber и запускается после него
  • getFloor работает параллельно с getCeil, и оба зависят от getExpNumber.
• Уметь использовать возвращаемое значение потока в каждом из моих flatMap, в настоящее время я получаю только последнее значение (мне нужно отобразить случайное значение (первое flatMap) пользователю, используя канал ngFor и async.

Зависимость: я могу добиться этого, проверяя тип моего текущего наблюдаемого значения в каждом flatMap, но я думаю, что должен быть лучший способ.

Полный код:

import { Component, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/switchMap';

@Component({
  selector: 'my-app',
  template: `
    <button (click) = "model.on = !model.on; userClick$.next()">{{ model.on ? 'Stop' : 'Start' }}</button>
    <h1>Numbers stream</h1>
    <div *ngFor = "let numberValue of (numbers$ | async)">
      <h2>{{ numberValue }}</h2>
    </div>
    <label>{{ model.log }}</label>
  `,
})
export class App {
  model = {
    on: false,
    log: ''
  }
  userClick$ = new Subject<void>();
  numbers$: Observable<number[]> = this.userClick$
    .filter(() => !!this.model.on)
    .do(() => this.model.log = '')
    .switchMap(() => this.getRandomNumber())
    .switchMap((num) => this.getExpNumber(num))
    .switchMap((num) => this.getFloor(num))
    .switchMap((num) => this.getCeil(num));
  constructor() {
  }
  /**
   * Runs after user click
   */
  getRandomNumber(): Observable<number[]> {
    return new Observable<number[]>(observer => {
      this.model.log += ' getRandomNumber';
      observer.next([Math.floor(Math.random() * 10) + 1]);

      return () => {}
    }
  }
  /**
   * Depends on getRandomNumber and run after it
   */
  getExpNumber(n: number): Observable<number[]> {
    return new Observable<number[]>(observer => {
      this.model.log += ' getExpNumber';
      observer.next([Math.floor(Math.exp(n)]);

      return () => {}
    }
  }
  /**
   * Runs in parallel with getCeil
   */
  getFloor(n: number): Observable<number[]> {
    return new Observable<number[]>(observer => {
      this.model.log += ' getFloor';
      observer.next([Math.floor(n)]);

      return () => {}
    }
  }
  /**
   * Runs in parallel with getFloor
   */
  getCeil(n: number): Observable<number[]> {
    return new Observable<number[]>(observer => {
      this.model.log += ' getCeil';
      observer.next([Math.ceil(n)]);

      return () => {}
    }
  }
}
@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}