Как использовать Observable для выдачи каждого значения из массива через каждую 1 секунду (Angular 5)?

Question

У меня есть список продуктов в массиве products: Product []

Используя следующий метод Observable и Observer, я хочу выводить каждый продукт в свой пользовательский интерфейс через каждую 1 секунду. Как я могу совершить sh это?

Это то, что я пытался, это производит бесконечное l oop. Любая помощь будет высоко ценится.

 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

Вот рабочий пример.

Компонент, который оказывает желаемый эффект, будет выполнять цикл

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

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