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

Question

我有一个产品列表和一个数组产品：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;
  }

Answer 1

您可以使用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;
  }

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)
  )