Угловой компонент не обновляет вид, как ожидалось

У меня небольшая проблема с компонентом, который не обновляется должным образом. Существует компонент, предоставляющий функцию publish. Эта функция вызывает generateDownload со списком объектов. Теперь getDrawing называется. Данные, возвращаемые sscmData.getDrawing, обновляют представление, и это работает как шарм.

export class DrawingComponent  {
    ...

    getDrawing(distance: DistanceSplit, reloadPredrawSkaters?: boolean): Observable<any> {

        return this.sscmData.getDrawing(distance.ID, distance.distance).pipe(
            map((response: Drawing) => {
                    ...
                    do some things
                    ...
            })
        )
    }

    publish(distances: DistanceSplit[]) {
        this.generateDownload(distances).subscribe(tabledata => {
            console.log(tabledata)
        })
    }

    generateDownload(list: DistanceSplit[]): Observable<any> {
        return from(list).pipe(
            concatMap((distance: DistanceSplit, index: number) => {
                return this.getDrawing(distance).pipe(
                    tap(() => {
                        this.changeDetectorRef.detectChanges();
                        console.log(this.propress);
                        this.propress++;
                    }),
                    map(res => {
                        let tabledata = ...
                        return tabledata;
                    })
                );
            })
        );
    }
}

Моя проблема propress, это простая переменная, и я хочу видеть в представлении компонента текущее значение {{ propress }}. Но значение отображается только тогда, когда наблюдаемое полностью обработано. Таким образом, он всегда показывает длину списка, но не текущее значение.

Я ожидал увидеть возрастающее значение, например. 1...2...3...4... и т.д. Как заставить его работать?