Intersection Observer дважды запускает обратный вызов на ngAfterViewInit

Я попытался отложить загрузку изображений с помощью Intersection Observable в моем приложении angular 7. Я вызвал Intersection Observable из ловушки жизненного цикла ngAfterViewInit. Но когда я загружаю приложение, обратный вызов вызывается дважды: один раз со всеми значениями isIntersecting как истинными, а следующий - с правильными значениями isIntersecting. Меня смущает такое поведение.

ngAfterViewInit() {
const imgOne = document.querySelectorAll('[data-class]');

    const options = {
      // root: document
      // threshold: 0
    };

    const observer = new IntersectionObserver((entries, observer) => {
      console.log(entries.length);
      entries.forEach((entry) => {
        // console.log(entry);
        if (!entry.isIntersecting) {
          return;
        } else {
          const el = entry.target;
          if (el.id === ('test' + this.testCount)) {
            console.log(entry);
          }
          // observer.unobserve(entry.target);
        }
      });
    });

    imgOne.forEach((eachQuery) => {
      observer.observe(eachQuery);
    });
 }

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

ОБНОВЛЕНИЕ: теперь наблюдатель пересечения вызывается отлично, но теперь возникла проблема. Поскольку мы используем document.querySelectorAll, который возвращает статический список узлов, после обновления массива список узлов не обновляется. Если я попытаюсь использовать document.getElementsByClassName, выдается ошибка, поскольку это не список узлов ???