Слайд-изображения, полученные с сервера, в ion-card (загружайте по одному за раз)

Question

Я работаю с ionic 3. У меня более 750 мобильных изображений в дБ. Я получаю одно изображение за раз, чтобы показать в ионной карте в ионных слайдах. Я хочу следующее изображение, когда я проведу к следующему и так же с предыдущим изображением. Я попытался получить мобильные идентификаторы, а затем я создал массив и инициализировал его до этого мобильного идентификатора.

constructor(
    public navParams: NavParams,
    private backend: BackendProvider
  ){
    console.log('id get from list', navParams.data); //this is the id of current mobile image.

    this.phoneId = navParams.data;
    for(let index = 0; index <= navParams.data; index++)
      this.idArray[index] = index; //initializing array here.
    console.log('id arrays', this.idArray);
  }

ngOnInit()
  {
    //@params: getMobilesData(limit, searchtype => id, id => in string)
    this.backend.getMobilesData(1, 'id', this.phoneId.toString()).then((res) =>
    {
      console.log('phone details on init', this.phoneId);

      this.slides.slideTo(this.phoneId); // moved to required slide using id
      this.mobile = JSON.parse(res.data).data[0]; //here the data with image
      console.log(this.mobile);

      this.isLoading = false;
    }).catch((error) =>
    {
      console.error(error);
    });
  }

Вот HTML-файл

//here using ionSlideDidChange event
<ion-slides (ionSlideDidChange)="slideChanged($event)" cancelable=false>
    <ion-slide *ngFor="let id of idArray> //iteraing in array
      <ion-spinner *ngIf="isLoading" name="ripple"></ion-spinner>
      <ion-card *ngIf="!isLoading">
//Here mobileImagesURL => request url
//id => id from IdArray
//mobile.thumbnail => mobile image
        <img class="set-img" [src]="mobileImagesURL + id + '/' + mobile.thumbnail">
        <ion-card-content>
          <ion-card-title>
            {{mobile.name}}
          </ion-card-title>
        </ion-card-content>
      </ion-card>
    </ion-slide>
  </ion-slides>

Так что если я проведу пальцем к предыдущему *ion-slide**. Я получу данные, используя мобильный идентификатор.

Когда я перемещаюсь к следующему ионному слайду, я нажимаю идентификатор мобильного устройства сначала в массиве в событии (ionSlideDidChange), чтобы увеличить размер массива, а затем отправляю запрос на мобильное изображение.

slideChanged(event)
  {
    console.log('slide change event in getimage', event);
    if(event.swipeDirection == 'next')
    {
      //increasing phoneId and pushing in idArray.
      this.phoneId++;
      this.idArray.push(this.this.phoneId);
      console.log('pushing mobile id', this.phoneId);

    }
    else if(event.swipeDirection == 'prev')
      this.phoneId--; // decreasing it if 
    console.log('id array', this.idArray);

    this.backend.getMobilesData(1, 'id', this.idArray[this.phoneId].toString()).then((res) =>
    {
      if(JSON.parse(res.data).totalCount != 0)
      {
        this.mobile = JSON.parse(res.data).data[0];
        console.log('current mobile data', this.mobile);
        console.log('current mobile id', this.idArray[this.phoneId]);
        this.isLoading = false;
      }
      else
      {
        this.phoneId++;
        this.noData = true;
        this.slides.slideNext();
        this.noData = false;
        this.slideChanged(event);
      }
    }).catch((error) =>
    {
      console.error(error);
    });
  }[![here's the image][1]][1]

Это вызывает 2 проблемы:

Первое: я не могу пропустить итерацию в ngFor, если мобильный идентификатор отсутствует в БД. потому что ngFor не позволяет этого. Я пытался использовать пользовательские трубы. Но я не очень хорошо держу трубку.

Второе: когда я провожу слайды, он обновляет массив с помощью мобильного идентификатора. Но это придется дважды провести пальцем, чтобы изменить ион-слайд.

Мне нужны решения обеих моих проблем... Если у кого-то есть другие предложения, я буду ему благодарен.

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