detectChanges 不更新异步管道

Question

我在组件中使用这个 observable

    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));

管道按预期工作：轮询结果直到不再有状态设置为“正在处理”的项目

这是管道在模板中的使用方式

            <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>

即使轮询结束，模板状态也不会更新（我看到控制台日志中所有项目的状态都设置为“已完成”或“未处理”）。

我错过了什么？

Answer 1

我无法准确理解您的代码应该如何工作，所以我只是在这里猜测，但请注意，默认情况下 takeWhile 不会发出导致条件的值至 return false.

因此，一旦 records$ 开始仅发射带 status != 'processing' 的项目，pagedRecords$ 将在不发射它们的情况下完成。为了发出这些值，您需要在 takeWhile:

上将 inclusive 选项设置为 true

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

detectChanges 不更新异步管道

detectChanges doesn't update async pipe

angular

rxjs

async-pipe