Angular（可观察）：合并中的更新间隔

Question

我想知道如何在 table 中更新数据时更改合并中的间隔值：

 merge(this.sort.sortChange, this.paginator.page, interval(this.delay))
      .pipe(
        startWith({}), // ... fetch data

我需要 table 在我单击一行时对话框打开时不会更新，所以我想在间隔中放置一个大计时器（或者如果您有更好的解决方案, 或者如果你知道在 TS 中获取最大日期也欢迎 ^^')

  selectRow(row: GithubIssue) {
    this.selection.select(row);
    this.delay = 10000000;

    const dialogRef = this.dialog.open(DialogComponent);
      dialogRef.afterClosed().subscribe(() => {
        this.selection.clear();
        this.delay = 30000;
      });
  }

如果有帮助，我已经制作了一个 stackblitz 回购协议：repo stackblitz

感谢您的帮助

Answer 1

我会尝试使用 skipWhile 运算符。像

.pipe(
  skipWhile(() => this.dialogRef && this.dialogRef.getState() === MatDialogState.OPEN)
)

Answer 2

您可以创建一个可以通过切换主题打开和关闭的间隔流。假设全局范围内有 keepUpdating$ = new BehaviorSubject<boolean>(true);。

toggleInterval$ = keepUpdating$.pipe(
  switchMap(update =>
    update? interval(this.delay) : EMPTY
  )
);

merge(this.sort.sortChange, this.paginator.page, toggleInterval$)
  .pipe(
    startWith({}), // ... fetch data

然后你可以像这样使用它：

selectRow(row: GithubIssue) {
  this.selection.select(row);
  this.keepUpdating$.next(false);

  const dialogRef = this.dialog.open(DialogComponent);
    dialogRef.afterClosed().subscribe(() => {
      this.selection.clear();
      this.keepUpdating$.next(true);
    });
 }

旁注：

像这样轮询您的 backend/database 可能是一个糟糕的设计选择。如果您想实时更新您的 table，在等待任何更新时让您的 table 打嗝（带有加载动画）是很糟糕的 user-experience。相反，您应该考虑在后台执行更新，并在准备好显示后将更新推送到 table。

这样就不需要间隔检查，您只需在更改准备就绪时推送即可。

Angular（可观察）：合并中的更新间隔

Angular (observable): update interval in merge

observable

rxjs

typescript

angular