离子VirtualScroll不能读取空的属性“长度”

Question

我试图在Ionic 3中使用虚拟卷轴，但它不起作用。

我在我的提供者上有这样的功能：

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

在我的单子上，我有一个：

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()
    })
  }

我的list.html这个：

<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)

我做错了什么？

Answer 1

我得到了同样的问题，并找到了一个解决办法，尽管它不是最佳的。

您可以从文献资料 [virtualScroll]中看到数组。当您的this.ads返回一个可观察的时。这就是为什么你有Cannot read property 'length' of null。

解决办法:先订阅它，然后在视图上显示它(没有异步管道)，并且在完成时也要记住不要出现子类。

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