Столкнувшись с проблемой бесконечной прокрутки с использованием ионных 2/3 - PullRequest
Новая
       6

Столкнувшись с проблемой бесконечной прокрутки с использованием ионных 2/3

0 голосов
/ 09 июня 2018

Здесь я потребляю динамические данные с параметром, я применил бесконечную прокрутку, но элементы, которые не отображались на моей странице прокрутки, это мой код:

.html 

  <ion-list class="_list" *ngFor="let ifo of IData;"  (click)="go(ifo.Id,ifo.Name)"   >

<ion-item class="itm">
      <ion-avatar item-start role="img">
        <img [src]="'data:image/png;base64,'+ifo.Image" style="width: 110px;">
      </ion-avatar>

      <div class="item-inner">
        <h2 class="_nme">{{ifo.Name}}</h2>
        <p class="_price">{{ifo.Cost}}</p>
        <ion-icon name="arrow-dropright"></ion-icon>
      </div>

    </ion-item>

  </ion-list>

     <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
  <ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>

ниже мой код ts: 

getAllData(id){     
    const toast = this.toastCtrl.create({
      message: 'Unable to get data',
      duration: 2000,
      position: 'bottom'
    });

    this.serv.Get(id).subscribe(res =>{
      loading.dismiss();

      this.iData = res.GetResult;
      console.log(this.iData);


    },err=>{
       toast.present();
    })

  }




doInfinite(infiniteScroll) {
    console.log('Begin async operation');

    setTimeout(() => {
      for (let i = 0; i < 10; i++) {
        this.iData.push( this.iData.length );
      }

      console.log('Async operation has ended');
      infiniteScroll.complete();
    }, 500);
  }

на самом деле до этого элемента супа есть только список, хотя списка нет, он отображает пустые изображения и список ItemsData

1 Ответ

0 голосов
/ 09 июня 2018

Похоже, это потому, что вы повторяете ion-list вместо ion-item.Пример из документов:

enter image description here

Вы должны сделать следующее: 

<ion-list class="_list">
  <ion-item class="itm" *ngFor="let ifo of IData" (click)="go(ifo.Id,ifo.Name)">CONTENT OF ITEM GOES HERE</ion-item>
</ion-list>

Идея состоит в том, чтобы повторить пункты внутри один контейнер .И вот ссылка на документы для получения дополнительной информации.

PS : я тоже не уверен, у вас есть ion-contentэлемент обертки, в большинстве случаев мы должны включать его, чтобы заставить работать ионный материал.Если у вас его еще нет, включите его, как показано на скриншоте.

...