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

【问题标题】：How to use Observable to emit each value from an array after every 1 second(Angular 5)?如何使用 Observable 每 1 秒（Angular 5）从数组中发出每个值？
【发布时间】：2021-01-08 22:40:14
【问题描述】：

我有一个 Products 数组 products: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;
  }

【问题讨论】：

标签： angular rxjs rxjs-observables

【解决方案1】：

这是一个工作示例。

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

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

【讨论】：

感谢 Supun，我仍然想知道是否可以在服务级别处理 observable 可以按指定时间间隔顺序发出值。
不要在服务中这样做。让服务成为服务。在我看来，这是糟糕的设计实践。公开辩论。如果真的有必要，你可以这样做。
既然你坚持就加了。我建议稍后使用 Presentation 进行 PRESENTATION 和服务层做它应该做的事情。但是这两个示例现在都可用
非常感谢，这很快。我是 Angular 和 RxJs 的初学者，只是想探索 observable 并用它创建流效果。非常感谢您的设计技巧。

【解决方案2】：

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

【讨论】：

感谢您抽出宝贵时间@nilsandrey 这会在 1000 毫秒后同时推送所有产品
Ups，是的，我很抱歉。我改变了方法并对其进行了测试。现已编辑。

【解决方案3】：

只需使用 rx 运算符distinctUntilChanged 来比较一个新的数组长度并做一些事情：

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

【讨论】：