时间戳

首页 > 解决方案 > 如何使用 Observable 每 1 秒（Angular 5）从数组中发出每个值？

angular - 如何使用 Observable 每 1 秒（Angular 5）从数组中发出每个值？

问题描述

我有一个产品列表和一个数组产品：Product[]

使用 Observable 和 Observer next 方法，我想每 1 秒后将每个产品发送到我的 UI。我怎样才能做到这一点？

这是我尝试过的，它正在产生一个无限循环。任何帮助将不胜感激。

 public streamAllProducts(): Observable<Product> {
    const products = this.ds.getProducts();

    const sequence = new Observable((observer) => {

      products.forEach(element => {


        setTimeout(() => {
          observer.next(element);
        }, 1000
        );
      });


    });
    return sequence;
  }

标签： angularrxjsrxjs-observables

解决方案

您可以使用delay运算符和observer.complete()

更新

  • interval每次您可以使用迭代（无限）时，该运算符都会生成一个具有递增值的可观察对象。
  • 您可以使用 aSubject来轻松生成。
  • 您可以处理内部订阅并在没有更多产品要发出时停止它。
  public streamAllProducts(): Observable<Product> {
    const products = this.ds.getProducts();
    const sequence = new Subject<Product>();

    let timer: Subscription;
    timer = interval(1000).subscribe(index =>
      index < products.length
        ? sequence.next(products[index])
        : timer.unsubscribe()
    );    

    return sequence;
  }

推荐阅读