Angular 延迟可观察流，而行为主体值===false

我有一个应用程序，每2秒执行一次HTTP请求并更新视图。问题是，我必须做一些用户触发的CSS动画，这些动画需要大约一秒钟的时间，并且经常会被破坏，因为Angular会在动画运行时更新DOM

Im使用存储和检索观察值，如下所示：

this.dosingVessels$ = this.dosingVesselsQuery.selectAll().pipe(*needs rxjs operator magic*);

然后在组件中显示它们，如下所示：

    <app-solving-vessel *ngFor="let vessel of solvingVessels$ | async"
                    [vessel]="vessel"
                    [ngClass]="{'animation-class': hoverId === vessel.id}">
    </app-solving-vessel>

视图没有得到更新

---

我发现了delayWhen操作符，但所有的例子都是关于计时器的，我不确定这是否是正确的方法。

延迟可观察订阅或延迟可观察本身是帮助您的原因访问链接的方法，这基本上表明延迟发生在绝对时间。因此，基本上，您的代码应该是

this.dosingVessels$ = this.dosingVesselsQuery.selectAll().pipe(delaySubscription(1000));

或

---

debounce

是否支持您的需求？你可以传递给它一个可观察的，你的链条将等待，直到可观察的发射，然后继续。如果需要它等待特定值，还需要使用

过滤器

运算符

我不确定您的代码中到底在哪里需要这个，但它可能看起来像这样：

this.dosingVesselsQuery.selectAll().pipe(
    debounce(() => 
        this.updateView
            .pipe(filter(val => val == true))
            .pipe(first())));

编辑：

---

似乎您的需求最好由

debounce

来支持。我已经相应地编辑了我的文章。

我认为这对我没有帮助。比方说，我在0时获取数据。然后在1.5秒时，用户与页面交互并运行动画。在这种情况下，我必须等待500毫秒后才能更新页面。。。但是，如果用户以1.3秒或1.9秒的速度与页面交互呢？那么我的时间间隔就不一样了？干杯，你的解决方案正是我所需要的。由于我的SO分数很低，所以不能给你公开+1，但非常感谢你的贡献！谢谢！：）

this.dosingVessels$ = this.dosingVesselsQuery.selectAll().pipe(delay(1000));

this.dosingVesselsQuery.selectAll().pipe(
    debounce(() => 
        this.updateView
            .pipe(filter(val => val == true))
            .pipe(first())));