Angular - остановка наблюдаемого интервала

Question

l Создал Observable с интервалом RXJS и передал массив с img src, и я использовал асинхронный канал в шаблоне, чтобы подписать значение src для зацикливания изображений.

  index: number;
  image$: Observable<any>;
     stoploop : boolean = false


     play() {

      this.image$.subscribe(()=>{

        let imgs: string[]=[
          '1',
          '2',
          '3',
          '4',
          '5',
          '6',
          '7',
          '8',

        ];

        this.index=imgs.length;
        this.image$ =interval(400).pipe(map(()=>{
          this.isImageLoaded = true
          return imgs[imgs.length - this.index++ % imgs.length -1]
        })),startWith(imgs[0],takeWhile(()=>this.stoploop))

      })

        }



      stop() {

           this.image$.unsubscribe()

        console.log(this.stoploop=true)
      }

Проблема в том, когда я нажимаюна веселье остановка интервал не останавливается у меня ошибка Property 'unsubscribe' does not exist on type 'Observable<any>'. Did you mean 'subscribe'?

Answer 1

Ваш takeWhile не входит в pipe.

this.stoploop = false;
this.image$ = interval(1000).pipe(
  startWith(imgs[0]),
  takeWhile(()=>!this.stoploop),
  map(() => {
    this.isImageLoaded = true
    return imgs[imgs.length - this.index++ % imgs.length -1]
  })
);

https://stackblitz.com/edit/angular-2spwne?file=src/app/app.component.ts