0

我在组件中使用这个 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>

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

我错过了什么？

4

1 回答 1

2

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

因此，一旦records$开始仅发射项目，status != 'processing' pagedRecords$将完成而不发射它们。为了发出这些值，您需要将inclusive选项设置为trueon takeWhile：

takeWhile(records => records.some(rec => rec.status === 'processing') || !this.recordingsLoaded, true)
于 2021-08-09T10:03:01.883 回答