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?

lbsn · Accepted Answer · 2021-08-09 10:03:01Z

2

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)

answered Aug 9, 2021 at 10:03

lbsn

2,4221 gold badge13 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

detectChanges doesn't update async pipe

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related