Ionic VirtualScroll Cannot read property 'length' of null

问题:

I have this function on my provider:

getActiveAds(){     return this.afDb.list<AngularFireList<any>>('/ads-active', ref => ref.orderByChild('adPlanPriority').startAt(1).endAt(3))   } 

On my list page, i have this:

constructor(public navCtrl: NavController, public navParams: NavParams, public loadingCtrl: LoadingController, public adProvider: AdProvider) {     this.loading = this.loadingCtrl.create();     this.loading.present();      this.ads = this.adProvider.getActiveAds().valueChanges()     this.ads.subscribe((cat)=> {       this.loading.dismiss()     })   } 

and my list.html this:

<ion-list no-lines [virtualScroll]="ads | async">         <button ion-item *virtualItem="let ad" (click)="onAdSelect(ad)" class="aero-item ">             <ion-thumbnail item-start>                 <img src="assets/images/noimage.jpg" />             </ion-thumbnail>             <h2>{{ ad.model}}</h2>          </button>     </ion-list> 

Cannot read property 'length' of null TypeError: Cannot read property 'length' of null     at VirtualScroll._stepDOMWrite (http://localhost:8100/build/vendor.js:92118:60)     at http://localhost:8100/build/vendor.js:92078:23     at dispatch (http://localhost:8100/build/vendor.js:20601:9)     at DomController._flush (http://localhost:8100/build/vendor.js:20545:13)     at rafCallback (http://localhost:8100/build/vendor.js:20534:22) 

What am I doing wrong?

回答1:

I got the same issue and found a workaround, although it's not optimal.

You see from the documentation [virtualScroll]expect an Array. While your this.ads return an Observable. That's why you got Cannot read property 'length' of null.

Workaround: Subscribe to it first then display on view (without async pipe), also keep in mind to unsubsribe when done.

ads: any[] = []; constructor(public adProvider: AdProvider) {     this.adProvider.getActiveAds().valueChanges().subscribe(results => this.ads = results);     } 

文章来源: Ionic VirtualScroll Cannot read property 'length' of null