trying to get data from firebase based on the login user ID but i am having error when using changes.map. Error show in vscode is “property ‘map’ does not exist on type ‘unknown’”.
Below is how i am getting the data:
-----------------shopping-list.ts:-----------------
userId: string;
private shoppingListRef: any;
constructor(private db: AngularFireDatabase, private afAuth: AngularFireAuth){
this.afAuth.authState.subscribe(data => {
if(data && data.email && data.uid){
this.userId = data.uid;
this.shoppingListRef = this.db.list<Item>(`shopping-list/${data.uid}`);
}
})
}
getShoppingList(){
return this.shoppingListRef;
}
---------------home.ts:----------------------
shoppingList$: Observable<Item[]>;
userId: string;
profileData: Observable<Profile>;
constructor(public navCtrl: NavController, private shopping: shoppingListService,
public db: AngularFireDatabase, private toast: ToastService,
private afAuth: AngularFireAuth, private account: userAccountService) {}
ionViewWillLoad(){
this.afAuth.authState.subscribe(data => {
if(data && data.email && data.uid){
this.profileData = this.db.object<Profile>(`profile/${data.uid}`).valueChanges();
this.userId = data.uid;
this.getItemList();
}
else{
this.navCtrl.setRoot('LoginPage');
}
})
}
getItemList(){
try{
this.shoppingList$ = this.shopping
.getShoppingList() //this reruns the DB list
.snapshotChanges() //this gives the keys and value pairs
.pipe(map(
changes => {
**return changes.map(c => ({//this changes.map is where the error is showing**
key: c.payload.key,
...c.payload.val()
}));
}
));
}
catch(e){
console.error(e);
}
}
----home.html------ This is how i display the records
<ion-item-sliding *ngFor="let item of shoppingList$ | async; let i=index" (click)="toggleAccordion(i)" [ngClass]="{active: isAccordionShown(i)}" >
------Below is my package.jason:--------
{
"name": "shoppingList",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"start": "ionic-app-scripts serve",
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint"
},
"dependencies": {
"@angular/animations": "5.2.11",
"@angular/common": "5.2.11",
"@angular/compiler": "5.2.11",
"@angular/compiler-cli": "5.2.11",
"@angular/core": "5.2.11",
"@angular/forms": "5.2.11",
"@angular/platform-browser": "5.2.11",
"@angular/platform-browser-dynamic": "5.2.11",
"@ionic-native/core": "4.20.0",
"@ionic-native/network": "^4.20.0",
"@ionic-native/splash-screen": "4.20.0",
"@ionic-native/status-bar": "4.20.0",
"@ionic/storage": "2.2.0",
"angularfire2": "^5.4.2",
"cordova-plugin-network-information": "2.0.2",
"cordova-res": "^0.15.1",
"firebase": "^7.15.0",
"ionic-angular": "3.9.9",
"ionicons": "3.0.0",
"native-run": "^1.0.0",
"promise-polyfill": "^8.1.3",
"rxjs": "6.0.0",
"rxjs-compat": "6.2.2",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.29"
},
"devDependencies": {
"@ionic/app-scripts": "3.2.4",
"@ionic/lab": "3.1.7",
"cordova-plugin-device": "2.0.2",
"cordova-plugin-ionic-keyboard": "^2.0.5",
"cordova-plugin-ionic-webview": "^4.0.0",
"cordova-plugin-splashscreen": "5.0.2",
"cordova-plugin-statusbar": "2.4.2",
"cordova-plugin-whitelist": "1.3.3",
"typescript": "^2.6.2"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-network-information": {},
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-ionic-keyboard": {}
},
"platforms": [
"android"
]
}
}
This error Started after i upgraded typescript to the latest using npm i typscript@latest and it updated to version “^3.9.7”.
-----Things i have tried-------
- Downgrade the typescript
- Upgrade rxjs and rxjs-compat to 6.5.5,6.3.0,6.2.0
- Created a new project
- Delete node_modules, package-lock.jason, and did npm install
I really need help beause i have been on this for days with no solution. Thanks to you all in advance