Ionic VirtualScrool無法讀取屬性「長度」空

Question

Dears，

我試圖使用離子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

我得到了同樣的問題，並找到了解決方法，雖然它不是最佳的。

您從the documentation[virtualScroll]預計陣列。而你的this.ads返回Observable。這就是爲什麼你得到Cannot read property 'length' of null。

解決方法：先訂閱它，然後在視圖中顯示（沒有異步管道），並且在完成時記住unsubsribe。

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