RxJS toArray not being called

Question

I've got an RxJS sequence as follow:
(control is an Angular FormControl)

control.valueChanges.pipe(
    concatMap(cronExprs => from(cronExprs as Array<string>)),
    concatMap(cron => this.invokeCronService(cron)),
    toArray()
).subscribe(cronExprs => this.setCronExpressionModels(cronExprs))

Say the cronExprs array has three items ['..', '..', '..']. I can see, while debugging, the concatMap(cron => this.invokeCronService(cron)) clojure is called three times, but toArray is never called, and obviously the subscribe clojure is never called too. Seems the sequence does not complete correctly.

invokeCronService is:

private readonly invokeCronService =
    (cron: string): Observable<CronExpressionModel> =>
        this.cronService.describeCron(cron).pipe(
            map(result => result.get()),
            map((description): CronExpressionModel => ({ cron, description }))
        )

describeCron is a simple:

public describeCron(cronExpression: string): Observable<Result<string>> {
    return of(Result.valid('', cronExpression))
}

What am I doing wrong?

Answer 1

The toArray operator will emit its buffer only after its source Observable completes.

In your case your source is control.valueChanges that never completes so toArray will never emit anything. It depends on what you want to achieve but you could use scan() to collect all emissions while remitting all intermediate results or use take(1) as the first operator that will ensure the chain completes after the first emission from valueChanges.