detectChanges doesn't update async pipe

Question

I am using this observable in the component

    this.pagedRecords$ =
        this.records$.pipe(
            map((records) => records
                .filter(rec => (!this.filterParams.stream) || rec.streamId === this.filterParams.stream)
                .filter(rec => (!this.filterParams.topicId) || rec.topicId === this.filterParams.topicId)
                .filter(rec => (!this.filterParams.date || moment.tz(rec.timestamp, rec.timezone)
                    .isSame(this.filterParams.date.original.tz(rec.timezone), 'day')))
                .slice(page * this.pagination.perPage, (page + 1) * this.pagination.perPage - 1)),
            tap((records) => {
                console.log(records);
                this.noRecordings = records.length === 0;
                this.cdr.markForCheck();
                this.cdr.detectChanges();
            }),
            repeatWhen(delay(10000)),
            takeWhile(records => records.some(rec => rec.status === 'processing') || !this.recordingsLoaded),
            tap(() => this.recordingsLoaded = true));

The pipe works as it is supposed to do: polls result until there are no longer items having status set to "processing"

This is how the pipe is used in the template

            <ng-container *ngFor="let record of (pagedRecords$|async)">

                        <audio
                            *ngIf="browser === 'Chrome' && record?.status==='completed' && (record?.url|fileExtension) === 'mp3'"
                            controls
                            controlsList="nodownload"
                            class="w100">
                            <source [src]="record?.url" type="audio/webm">
                        </audio>

                 

                        <span *ngIf="record?.status==='processing'">
                            Recording processing
                        </span>

                        <div *ngIf="record?.status==='unprocessed'">
                            <div class="button smallest unset-width" (click)="processRecording(record)">
                                Process to download
                            </div>
                        </div>

                        <span *ngIf="browser !== 'Chrome'">Not supported in your browser</span>
                   
            </ng-container>

Even when polling ends, template status won't get updated (and I saw that status is set to "completed" or "unprocessed" on all items by console log).

What am I missing?

Answer 1

I can't get an exact understanding of how your code is expected to work, so I'm just guessing here, but note that by default takeWhile won't emit the value the caused the condition to return false.

So once records$ starts emitting only items with status != 'processing' pagedRecords$ will complete without emitting them. In order to emit those values you need to set the inclusive option to true on takeWhile:

takeWhile(records => records.some(rec => rec.status === 'processing') || !this.recordingsLoaded, true)