Question

我正在使用离子3。我在db中拥有超过750个移动图像。我一次得到一张图像，并显示在离子幻灯片的离子卡中。当我滑动到下一张图像时，我想要下一张图像，并且与上一张图像相同。我尝试获取移动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 **。我将使用移动ID 获取数据。

当我滑动到下一个 ion-slide 时，我会在（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 不允许这样做。我尝试使用自定义管道。但是我对 Pipes 不太了解。

第二：当我滑动离子滑轨时，它会使用移动ID 更新阵列。但是它必须滑动两次才能更改 ion-slide 。

我需要同时解决这两个问题...如果有人有其他建议，我将非常感谢他/她。

我希望我能清除自己。如果有什么我想念的，或者您不完全理解我的要求。请通知我。

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

0 个答案: