слайд-изображения, полученные с сервера, в 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 , я помещаю mobile id первым в массиве в (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 не позволяет этого. Я пытался использовать кастом Pipe . Но у меня нет хорошего сцепления с Pipes .

Второе: когда я смахиваю ion-slides , он обновляет массив с mobile id . Но придется дважды провести пальцем, чтобы изменить ion-slide .

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

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