与Ionic3和Angular2中的提供程序进行数据绑定

Question

In my app, I have a list to display which has a lot of data. The data is getting populated in a provider in a loop from Firebase. Now don't want to wait for the entire data to be loaded. So how can I bind my page list variable with the provider so that it displays as much as it has fetched?

Following is the code where I am populating a list in my provider class.

dataArray = new Array<any>();
for (let item of items) {
      this.afDB.object(`root`+item)
      .subscribe(data=> {
        this.dataArray.push(data);
      });
    }

So the dataArray will be populated with time. Now I a importing the provider class in a page where I want to show the list with the data in dataArray. If I return dataArray then it has to be after the complete data fetching. So Is there a way I can bind the dataArray with some variable in my page or use it directly in the page?

Here in the HTML code:

<ion-list>
     <ion-item *ngFor="let item of items">
         {{item.value}}
     </ion-item>
</ion-list>

items is a variable in the page TS file.

Answer 1

Got my mistake.

import { DataProvider } from './../../providers/data/data';
constructor(private _data: DataProvider) {
  }

Here I was using Private for the reference. That is why I was unable to use it in the HTML class. It has to be Public .