ionic-framework - 幻灯片图像，从服务器获取，在离子卡中（一次加载一个）

Question

我正在使用 ionic 3。我在 db 中有超过 750 个移动图像。我一次得到一张图像，以显示在ion-slides的ion-card中。当我滑动到下一张并且与上一张图像相同时，我想要下一张图像。我尝试获取移动 ID，然后创建了一个数组并将其初始化为这个移动 ID。

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)事件中的数组中推送移动 ID以增加数组的大小，然后发送对移动图像的请求。

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个问题：

第一：如果 db 中缺少移动 id，我不能在 ngFor 中跳过迭代。因为ngFor不允许这样做。我尝试使用自定义Pipe。但我对Pipes没有很好的把握。

第二：当我滑动ion-slides时，它会使用mobile id更新数组。但它必须滑动两次才能更改ion-slide。

我需要解决我的两个问题...如果有人有其他建议，我会感谢他/她。

我希望我清除了自己。如果我在这里错过了什么，或者你不完全理解我的要求。请通知我。