Currently, I have code that is fetching records from the Firebase database using both Angular and Ionic.
The code functions properly, but it does not provide me with the keys for each record. Instead, it returns 'undefined'.
I have researched several online tutorials which suggest that switching from using valueChanges() to snapshotChanges() may solve this issue. However, each tutorial demonstrates a different method of extracting records, leading to discrepancies in version compatibility.
As someone who primarily works in Java, transitioning to the JavaScript realm has presented some challenges.
Please provide guidance on how to rectify this situation.
home.ts
export class HomePage implements OnInit {
private items$: Item[] = [];
constructor(private shoppingListService: ShoppingListService) {
this.shoppingListService.getShoppingList().valueChanges().subscribe((datas) => {
datas.forEach(data => {
console.log(data);
//data.key is undefined here
console.log("=>" + data.key + " " + data.name + " " + data.quantity + " " + data.price);
this.items$.push({key: data.key, name: data.name, quantity: data.quantity, price: data.price});
})
}, (err) => {
console.log("problem:", err);
});
}
}
ShoppingListService.ts
@Injectable()
export class ShoppingListService {
//here 'shopping-list' is the name of the table
private shoppingListRef = this.db.list<Item>('shopping-list');
constructor(private db: AngularFireDatabase) {
this.getShoppingList();
}
getShoppingList() {
return this.shoppingListRef;
}
}
Item.model.ts
export interface Item {
key?: string;
name: string;
quantity: number;
price: number
}
package.json
"angularfire2": "^5.1.0",
"firebase": "^5.5.9",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"rxjs": "^6.0.0",
"rxjs-compat": "^6.3.3",
ionic info
Ionic:
ionic (Ionic CLI) : 4.4.0 (C:\Users\abc\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.0
System:
NodeJS : v10.13.0 (C:\nodejs\node.exe)
npm : 6.4.1
OS : Windows 10