Question

我有以下组件：

@Component({
    selector: 'summary-dialog',
    templateUrl: './summary-dialog.component.html',
    styleUrls: ['./summary-dialog.component.css']
})
export class SummaryDialogComponent implements OnInit {

    entriesSummaries: GuiEntrySummary[];
    private interval;

    constructor(private backendService: BackendService,
        private dialogRef: MatDialogRef<SummaryDialogComponent>,
        @Inject(MAT_DIALOG_DATA) private data: {
            eventDbid: number,
            timerState: TimerState,
            entries: IGuiEntry[]
        }) { }

    ngOnInit(): void {
        this.entriesSummaries = this.data.entries.map(entry => new GuiEntrySummary(entry));
        this.getSummaries();

        // automatic refresh the entries summaries every 10 secs
        this.interval = setInterval(() => {
            this.getSummaries();
        }, 10000)

        this.dialogRef.afterClosed().subscribe(() => clearInterval(this.interval));
    }

    private getSummaries(): void {
        this.backendService.getSummaries(this.data.eventDbid, this.data.timerState.elapsedSeconds).subscribe(entriesSummaries =>
            entriesSummaries.forEach(entrySummaries =>
                this.entriesSummaries.find(entry => entry.dbid === entriesSummaries.dbid).summaries = entrySummaries.summaries
            )
        );
    }
}

这个组件是一个对话框。每个条目（数据 -> 条目）都是对话框中的一行。已经解析的条目将被传递到对话框中，这是显示数据的基础。每个条目都将通过一个摘要数组来丰富。该组件应每 10 秒刷新一次所有条目的摘要。

但我在这里的主要问题是理解如何以可接受的方式实现这个用例。

在这种情况下订阅组件真的很糟糕吗？我主要是这样做的，因为模板应该一直显示现有数据，即使在从 backendService 获取新数据的短时间内也是如此。

如果我以异步方式执行此操作（例如：

<div *ngIf="( getAllEntriesSummaries |async ) as entriesSummaries">

)，我想，容器不会在获取新数据的确切时刻显示。此外，我还需要在模板中调用另一个函数，它将当前数据的数据与新数据合并？！

使用我当前的解决方案（可能在组件中使用反订阅模式）我有一个非常干净的模板：

<h2 mat-dialog-title>Entries Summaries</h2>
<mat-dialog-content class="mat-typography">

    <div class="grid">

        <div *ngFor="let entry of entriesSummaries; let i = index" class="entry-row"
            [ngClass]="i % 2 === 0 ? 'bg-even' : 'bg-odd'">

            <!--entry row -->

        </div>
    </div>
</mat-dialog-content>

Answer 1

您可以像这样使用 timer RxJS 运算符：

entriesSummaries$: Observable<GuiEntrySummary[]>;

ngOnInit() {
  this.entriesSummaries$ = timer(0, 10000).pipe(exhaustMap(() => this.getSummaries()));
}

private getSummaries(): Observable<GuiEntrySummary[]> {
   return this.backendService.getSummaries(this.data.eventDbid, this.data.timerState.elapsedSeconds).pipe(tap(() => /* side effects */));
  }

 <div *ngIf="(getAllEntriesSummaries$ | async) as entriesSummaries">

<块引用>

来自文档： timer 返回一个 Observable，它发出无限的升序整数序列，具有恒定的时间间隔，您可以在这些发射之间进行选择。第一次发射发生在指定的 DueTime 之后。最初的延迟可能是一个日期。默认情况下，此运算符使用 {@link asyncScheduler} {@link SchedulerLike} 来提供时间概念，但您可以将任何 {@link SchedulerLike} 传递给它。如果没有指定 period，输出 Observable 只发出一个值，0。否则，它发出一个无限序列。

我不会说订阅组件是一种不好的做法，但是，建议使用 async 管道以获得更好的性能，尤其是在您使用 OnPush 更改检测时。

Angular Observables：如何优化订阅/订阅与异步

1 个答案: