Угловой таймер 6

Question

У меня есть представление, которое опрашивает конечную точку каждые 30 секунд и обновляет, если есть изменения. В том же виде у меня есть div, который отображается / скрывается каждые 7 секунд. Таймеры запускаются одновременно.

Первые несколько раз он работает, он работает отлично. Лишь в первые 30 секунд таймер снова начинает мигать назад и вперед каждые 2 секунды, чего не должно быть.

component.ts

  getScreen(tapCode) {
    timer(0, 30000)
      .pipe(mergeMap(() => this.dataService.get_screen(tapCode)))
      .subscribe(objectResp => {
        this.callResp = objectResp.status;
        this.polledObj = objectResp.items;
        this.landing = false;
        this.loaded = true;
        this.unavailable = objectResp.items.unavailable;
        localStorage.setItem('ontapCode', tapCode);
        this.getAds(this.polledObj);
      });
  }

  getAds(polledObj) {
    this.showAd = false;
    this.adTimer = timer(0, 7000);
    this.adSubscription = this.adTimer.subscribe(() => {
      if(this.timerCount >= this.polledObj.adverts.length) {
        this.timerCount = 0;
      }
      if(this.timerCount <= this.polledObj.adverts.length) {
        this.adImage = this.polledObj.adverts[this.timerCount].filename;
        this.timerCount++;
      }
      this.showAd = !this.showAd;
    });
  }

component.html

   <div *ngIf="callResp === 'OK'" class="tap">
      <div *ngIf="unavailable === '1' || unavailable === 1" class="object-unavailable">
        <img src="./assets/unavailable.png" class="unavailable-img">
      </div>
      <div *ngIf="unavailable === '0' || unavailable === 0">
        <img src={{polledObj.img}} class="img-object">
        <div class="container">
          <div *ngIf="showAd === true">
            <div class="advertisement">
              <img src={{adImage}}" class="img-ad">
            </div>
          </div>
          <div *ngIf="showAd === false">
              <div class="object-detail-container">
                <h3 (click)="resetStorage()" class="object-name text-white">{{polledObj.object_name}}</h3>
                <h4 class="text-white object-brewery">{{polledObj.brewery}}</h4>
                <h4 class="text-white object-style">{{polledObj.style}} - {{polledObj.abv}}%</h4>
                <div class="object-sizes" *ngFor="let size of polledObj.sizes">
                  <span class="object-size-name">{{size.name}}: </span>
                  <span class="object-size-volume"> {{size.volume*1000}}ml </span>
                  <span class="object-size-price"> ${{getPrice(size.price)}} </span>
                  <span class="object-size-std"> {{getSizeStd(size)}} </span>
                  <span class="object-size-std-drinks"> std drinks</span>
                </div>
              </div>
          </div>
        </div>
        </div>