I am encountering errors and facing issues with data retrieval in my Angular and Ionic application when using AngularFire for Firebase integration.
Here is a snippet from my package.json file:
"dependencies": {
"@angular/common": "5.0.3",
"@angular/compiler": "5.0.3",
"@angular/compiler-cli": "5.0.3",
"@angular/core": "5.0.3",
"@angular/forms": "5.0.3",
"@angular/http": "5.0.3",
"@angular/platform-browser": "5.0.3",
"@angular/platform-browser-dynamic": "5.0.3",
"@ionic-native/core": "4.4.0",
"@ionic-native/splash-screen": "4.4.0",
"@ionic-native/status-bar": "4.4.0",
"@ionic/pro": "1.0.16",
"@ionic/storage": "2.1.3",
"angularfire2": "^5.0.0-rc.1",
"firebase": "^4.4.0",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"rxjs": "5.5.2",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.18"
},
My service configuration for Firebase is as follows:
constructor(public afDB: AngularFireDatabase) {
console.log('Hello FireBaseServicesProvider Provider');
}
getStockUserList(){
return this.afDB.list('stock/').valueChanges();
}
In the page.ts file, I have the following code:
stockList: Observable<any>;
this.stockList = this.fbService.getStockUserList();
This is how I display the data in the HTML file:
<ul>
<li *ngFor="let item of stockList | async">
{{ item.age }}
</li>
</ul>
The Firebase stock list contains name, age, and unique identifiers. While adding new data works fine, retrieving and displaying data seems to be problematic. I also encounter errors like 'ngFor is only for array elements' and TypeScript errors mentioning 'Cannot find type definition file for firebase'.