Angular(observable):合并中的更新间隔

Question

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

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

当我点击一行时，对话框打开时，我需要表格不更新，所以我想在间隔中放一个大计时器(或者如果你有更好的解决方案，或者如果你知道要在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：repo stackblitz

感谢您的帮助

Answer 1

您可以制作一个可以通过切换主题打开和关闭的间隔流。假设在全局范围内存在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);
});
}

---

旁注：

像这样轮询后端/数据库可能是一个糟糕的设计选择。如果你想实时更新你的表，在等待任何更新时让你的表打嗝(加载动画(是一种糟糕的用户体验。相反，您应该考虑在后台执行更新，并在表准备好显示后将更新推送到表中。

然后就不需要检查间隔了，只需在更改准备好时推送即可。

Answer 2

我会尝试使用skipWhile运算符。类似的东西

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