Angular 9 - другой результат при нажатии кнопки на рабочем столе и IOS

Question

Я создаю тестовое приложение, которое показывает изображения, созданные компьютером. Я загружаю их через сервис, который получает их из API, каждый получает новый случайный.

Первоначально левая кнопка отключена, пока пользователь не нажмет правую кнопку и не загрузит следующие изображения.

Если пользователь находится в конце массива изображений и щелкает правой кнопкой мыши, он либо загружает новые изображения, либо, если в массиве буферов уже есть изображения, затем удаляет одно из буфера и добавляет в массив обычных изображений, и переместите указатель вверх и покажите изображение.

Проблема в том, что на рабочем столе все работает нормально. Нет проблем. Проблема в том, когда я запускаю приложение с IPhone. Когда пользователь нажимает правую кнопку, левая кнопка становится активной, что является правильным, но изображение не изменяется. Если пользователь снова щелкнет вправо, изображение изменится.

По какой-то причине либо изменяется логика c, либо что-то происходит в том, как IOS обрабатывает мой код или фоновую загрузку изображений? Возможно, наблюдаемые http обрабатываются по-разному на мобильных устройствах?

приложение находится на https://app.zenatom.com Сначала попробуйте на настольном компьютере, а затем на Iphone.

левая кнопка:

  <button
    nbButton
    status="info"
    class="butt"
    style="margin-right: 10px"
    (click)="goLeft()"
    data-tap-disabled="true"
    disabled="{{ isLeftDisabled }}"
  >
    <nb-icon icon="arrow-back-outline"></nb-icon>
  </button>

правая кнопка:

  <button
    nbButton
    status="info"
    class="butt"
    data-tap-disabled="true"
    (click)="goRight()"
    disabled="{{ isRightDisabled }}"
  >
    <nb-icon icon="arrow-forward-outline"></nb-icon>
  </button>

переменные:

isImageLoading: Boolean = false;



  imageToShow: any;
  imageVisible = false;

  maxLoadedImages = 50;
  images: any[] = [];
  curIndex = 0;
  isLeftDisabled = true;
  isDownloadDisabled = true;
  isRightDisabled = true;

  minBufferImages = 5;
  bufferImages: any[] = [];

ngOnInit

ngOnInit() {

    this.faceDataService.getImageData().subscribe(result => {
      this.createImageFromBlob(result);
    });

    this.startBufferingImages(this.minBufferImages);
  }

функции:

  getImage(imageUrl: string): Observable<Blob> {
    return this.http.get(imageUrl, { responseType: "blob" });
  }

  goRight() {
    if (this.images.length - 1 == this.curIndex) {
      if (this.images.length > this.maxLoadedImages) {
        --this.curIndex;
        this.images.shift();
      }

      if (this.bufferImages.length - 1 == 0) {
        this.isRightDisabled = true;
        this.faceDataService.getImageData().subscribe(result => {
          this.imageVisible = false;
          this.createImageFromBlob(result);
          ++this.curIndex;
          this.isLeftDisabled = false;
        });
      } else {
        this.imageVisible = false;
        ++this.curIndex;
        this.isLeftDisabled = false;
        let bufferedImage = this.bufferImages.pop();
        this.images.push(bufferedImage);
        this.imageToShow = bufferedImage;
        this.imageVisible = true;

        if (this.bufferImages.length < this.minBufferImages) {
          this.startBufferingImages(this.minBufferImages);
        }
      }
    } else {
      ++this.curIndex;
      this.imageToShow = this.images[this.curIndex];
      this.isLeftDisabled = false;
    }
  }

  goLeft() {
    --this.curIndex;
    if (this.curIndex <= 0) {
      this.isLeftDisabled = true;
    }
    this.imageToShow = this.images[this.curIndex];
  }

  createImageFromBlob(image: Blob) {
    let reader = new FileReader();
    reader.addEventListener(
      "load",
      () => {
        this.imageToShow = reader.result;
        this.imageVisible = true;
        this.images.push(reader.result);
        this.isDownloadDisabled = false;
        this.isRightDisabled = false;
      },
      false
    );

    if (image) {
      reader.readAsDataURL(image);
    }
  }

  startBufferingImages(amount: number) {
    for (let i = 0; i < amount; ++i) {
      this.faceDataService.getImageData().subscribe(result => {
        this.createBufferImageFromBlob(result);
      });
    }
  }

  createBufferImageFromBlob(image: Blob) {
    let reader = new FileReader();
    reader.addEventListener(
      "load",
      () => {
        this.bufferImages.push(reader.result);
      },
      false
    );

    if (image) {
      reader.readAsDataURL(image);
    }
  }