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

Question

我有一个产品列表数组 products:Product[]

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

这是我尝试过的方法，它产生了无限的帮助 loop.Any 将不胜感激。

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

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

      products.forEach(element => {


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


    });
    return sequence;
  }

Answer 1

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

已更新

运算符 interval 每次可用于迭代（无限）时都会生成一个具有递增值的可观察对象。
您可以使用 Subject 来简化生成过程。
您可以处理内部订阅并在没有更多产品要发出时停止它。

  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;
  }

Answer 2

这是一个工作示例。

呈现所需效果的组件将执行循环

https://stackblitz.com/edit/angular-pzrfj1

Answer 3

只需使用 rx 运算符 distinctUntilChanged 来比较新的数组长度并执行一些操作：

myObservableArray
  .pipe(
    distinctUntilChanged(
      (value1: valueModel, value2: valueModelModel) =>
        value1?.prop.length === room2?.prop.length
    ),
    tap(() => //do something)
  )

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

How to use Observable to emit each value from an array after every 1 second(Angular 5)?

rxjs

angular

rxjs-observables