Динамическое добавление ионно-скользящих элементов, когда ионный список содержит больше данных - PullRequest
Новая
       40

Динамическое добавление ионно-скользящих элементов, когда ионный список содержит больше данных

0 голосов
/ 17 мая 2019

У меня есть список элементов, из этого списка я нажимаю один элемент, чтобы показать на слайдах. Мое требование - показать все элементы после щелчка / выбора одного элемента из списка в виде слайдов.

Например, я нажимаю на 100-й элемент из списка, тогда начальный слайд будет 100-м элементом, я могу установить начальный слайд как 100-й элемент, но для его загрузки требуется время (около 20 секунд). Вместо того, чтобы передавать весь массив в модальное слайд, я пытаюсь сначала передать один элемент после того, как проведешь влево и вправо, добавив остальные элементы в массив ion-slide. Я не могу этого добиться, пожалуйста, помогите кому-нибудь решить эту проблему.

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

Ионные слайды - динамически добавлять слайды до и после 

<ion-slides pager="false" #mySlides 
  (ionSlideDidChange)="onSlideChanged(mySlides); 
   mySlides.update()">
   <ion-slide *ngFor="let g of imgGallery; let i = index">
  <img [src]="aoiimageUrl + g.viewImage + '?token=' + token" 
     class="slider__image sploading" />
  </ion-slide>
 </ion-slides>


onSlideChanged(newSlides) {
   console.log("onSlideChanged mySlides ", newSlides);
   let index = this.slides.realIndex;
   console.log("onSlideChanged index ", index);
   if (newSlides.swipeDirection == "next") {
    this.zone.run(() => {  
    this.imgObject.push(this.imgGallery[this.slideNumber + 1]);
    //this.slides.slideNext();

  });  
  console.log("onSlideChanged this.imgObject ", this.imgObject);
  this.slides.update();
  let i = this.slideNumber++; 
  console.log("iiiii -- ", i);
  this.slides.slideTo(i, 0, true);
  this.cdr.detectChanges();
  // setTimeout(() => {
  //   this.slides.update(); // loop broken here.
  // }, 500);
  }

  }

Примечание. Код был изменен в целях отладки, я использовал все возможности

...