如何在 Ionic 3 中使用无限滚动和虚拟滚动？

Question

我不熟悉离子和角度，因此在使用虚拟滚动的无限滚动时遇到了一些问题。没有数据，即。图片、文本、点击功能在无限滚动时从打字稿中获取。只显示空的离子卡。

以下代码仅供参考：

HTML：

<ion-header>
  <ion-navbar color="dark">
    <ion-title><button>Appname</button></ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="card-background-page">
  <ion-list [virtualScroll]="categories">
    <ion-item *virtualItem="let category" class="itemcss">
        <ion-card (click)="category.golink()" class="wallcard">
          <img class='homecardimage' [src]="category.Url" />  
            <div class="card-title">{{category.Name}}</div>
          </ion-card>
    </ion-item>
  </ion-list>

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

</ion-content>

打字稿：

    import { Component } from '@angular/core';
    import { IonicPage, NavController, NavParams,AlertController,LoadingController,ActionSheetController } from 'ionic-angular';
    import { Network } from '@ionic-native/network';
    import {HomePage} from '../home/home';

    @IonicPage()
    @Component({
      selector: 'page-category',
      templateUrl: 'category.html',
    })

      categories = [];
      categories_arr= [
        { Name: 'name1' ,Url:'Cloudinary Link1',golink:()=>this.function1()},
        { Name: 'name2',Url:'Cloudinary Link2',golink:()=>this.function2()},
        { Name: 'name3',Url:'Cloudinary Link3',golink:()=>this.function3() },
        { Name: 'name4',Url:'Cloudinary Link4',golink:()=>this.function4()},
        { Name: 'name5',Url:'Cloudinary Link5',golink:()=>this.function5()}
      ];

    constructor(public navCtrl: NavController, public navParams: NavParams,private network: Network,public alertCtrl: AlertController,public loadingCtrl: LoadingController,public actionSheetCtrl: ActionSheetController) 
      {
        for (let category = 0; category < 3; category++) {
          this.categories.push( this.categories.length +'.'+ this.categories_arr[this.categories.length]);
        }
      }

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

        setTimeout(() => {
          for (let category = 0; category < 3; category++) {
            this.categories.push( this.categories.length +'.'+ this.categories_arr[this.categories.length]);
          }

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

function1(){
    this.navCtrl.push('Page1');
   }   

function2(){
    this.navCtrl.push('Page2');
   }   

function3(){
    this.navCtrl.push('Page3');
   }   

function4(){
    this.navCtrl.push('Page4');
   }   

function5(){
    this.navCtrl.push('Page5');
   }   

当我尝试此代码时，没有显示任何数据（名称，网址图像，点击功能），只显示空离子卡。为什么？更正我的代码。 谢谢。

Answer 1

我想我找到了我的问题的答案。在你的情况下可能会或可能不会起作用。无论如何， 我对打字稿代码进行了更改。其他一切都相同。与问题没有太大区别。

打字稿：

    import { Component } from '@angular/core';
    import { IonicPage, NavController, NavParams,AlertController,LoadingController,ActionSheetController } from 'ionic-angular';
    import { Network } from '@ionic-native/network';
    import {HomePage} from '../home/home';

    @IonicPage()
    @Component({
      selector: 'page-category',
      templateUrl: 'category.html',
    })

      categories = [];
      categories_arr= [
        { Name: 'name1' ,Url:'Cloudinary Link1',golink:()=>this.function1()},
        { Name: 'name2',Url:'Cloudinary Link2',golink:()=>this.function2()},
        { Name: 'name3',Url:'Cloudinary Link3',golink:()=>this.function3() },
        { Name: 'name4',Url:'Cloudinary Link4',golink:()=>this.function4()},
        { Name: 'name5',Url:'Cloudinary Link5',golink:()=>this.function5()}
      ];

    constructor(public navCtrl: NavController, public navParams: NavParams,private network: Network,public alertCtrl: AlertController,public loadingCtrl: LoadingController,public actionSheetCtrl: ActionSheetController) 
      {
        for (let category = 0; category < 3; category++) {
  this.categories.push( this.categories_arr[this.categories.length]);
  //Changed in this line.
        }
      }

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

        setTimeout(() => {
          for (let category = 0; category < 3; category++) {
      if(this.categories_arr[this.categories.length]!=null){//added IF
      this.categories.push( this.categories_arr[this.categories.length]);     
      //Changed in this line.              
         }
            }

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

function1(){
    this.navCtrl.push('Page1');
   }   

function2(){
    this.navCtrl.push('Page2');
   }   

function3(){
    this.navCtrl.push('Page3');
   }   

function4(){
    this.navCtrl.push('Page4');
   }   

function5(){
    this.navCtrl.push('Page5');
   }