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

问题描述

我有以下组件：

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular observable rxjs subscribe