Блог

Итак, я использую ionic с данными firebase, и мне приходится загружать их много. И из-за этого большого объема загружаемых данных отображаются не все изображения (как вы можете видеть на снимке экрана). Итак … что мне делать и возможно ли лениво загружать карты с данными.

вот мой код

    <div *ngIf="postcall1">
      <ion-card (swipeleft)="goTochat(postscall1)" *ngFor="let postscall1 of postcall1">

        <img class="pP" src="https://ucarecdn.com/{{ postscall1.profilePic }}/-/scale_crop/200x200/center/" />

        <ion-img (press)="openOptionSheet(postcall1)" (click)="open(postscall1)"
          src="https://ucarecdn.com/{{postscall1.postboost1ID}}/-/preview/{{postscall1.effect}}"></ion-img>

       
        <ion-button mode="ios" class="this-button" color="light" fill="clear">
          <ion-icon slot="icon-only" [name]="heartType"></ion-icon>
        </ion-button>

      </ion-card>
    </div>
 

и у меня есть эти 3 функции firebase для загрузки

  ngOnInit() {


    const postcall = this.aff.httpsCallable('postscall')
    this.sub = postcall({}).subscribe(data => {
      this.postcall = data

      console.log("postcall");
      console.log(this.postcall);
    })
    ///


    const postcall1 = this.aff.httpsCallable('postscall1')
    this.sub = postcall1({}).subscribe(data => {
      this.postcall1 = data

      console.log("postcall1");
      console.log(this.postcall1);
    })




  }
 

заранее благодарю вас

Поскольку вы используете Ionic, вы помещаете свои элементы в виртуальный свиток Ion.

В документации четко объяснено, что будут загружены только необходимые элементы.

 For performance reasons, not every record in the list is rendered at once; instead a small subset of records (enough to fill the viewport) are rendered and reused as the user scrolls.
 

Этот код не тестируется, но должен выглядеть так, как ожидается.

 <ion-virtual-scroll [items]="postcall1">
    <ion-card *virtualItem="let postscall1">
        <img class="pP" src="https://ucarecdn.com/{{ postscall1.profilePic }}/-/scale_crop/200x200/center/" />

        <ion-img (press)="openOptionSheet(postcall1)" (click)="open(postscall1)"
            src="https://ucarecdn.com/{{postscall1.postboost1ID}}/-/preview/{{postscall1.effect}}"></ion-img>

        
        <ion-button mode="ios" class="this-button" color="light" fill="clear">
            <ion-icon slot="icon-only" [name]="heartType"></ion-icon>
        </ion-button>
    </ion-card>
</ion-virtual-scroll>