How to pass data from page to page - firebase

Question

My objective is to pass data from page to page. However this error is bugging me. i have declare the navCtrl at the constructor
My constructor for request.ts
constructor(public navCtrl: NavController, public navParams: NavParams, angFire: AngularFireDatabase) {
this.request = angFire.list('/request');
this.userreq = angFire.list(`${this.userkey}`);
this.reqdetails = angFire.list('reqdetails');
}
my html page for request.html
<button class="nearby" ion-button large (click)="openMapPage()">Nearby</button>
my OpenPage method for request.ts
openMapPage()
{
var ref = firebase.database().ref("request");
ref.once("value")
.then(function(snapshot) {
var a = snapshot.exists(); // true
var c = snapshot.hasChild("reqdetails"); // true
var d = snapshot.child('reqdetails').exists();
var requestsKey = snapshot.key;
var requestsValue = snapshot.val();
snapshot.forEach(function(childSnapshot) {
var requestKey = childSnapshot.key;
var requestValue = childSnapshot.val();
var reqdetails = requestValue.reqdetails;
if(reqdetails)
{
this.data = requestKey;
console.log(this.data);
//this.arr.push(requestKey);
//console.log(this.arr);
}
});
this.navCtrl.push(MapPage, {'param1':this.data});
});
}
So after the user clicks on the OpenMapPage() from the request.html it will go to the openMapPage method found in reqeuest.ts and it will render the data to the map.html page
my map.html page:
<ion-list>
<ion-card *ngFor="let user of request | async" class="job">
<ion-avatar class="avatar" item-start>
<img src="../assets/icon/user_male-512.png">
</ion-avatar>
<h2 class="name">{{user.regdetails.username}}</h2>
<p text-wrap class="address"><ion-icon name="compass"></ion-icon> {{user.regdetails.address}}</p>
<p id="key">{{user.$key}}</p>
</button>
</ion-card>
</ion-list>
Now the error i am getting is this:

Answer 1

You should use Arrow functions. By using arrow functions, the this property is not overwritten and still references the component instance (otherwise, the this keyword points to the inner function, and your component's methods and variables are not defined in it):
openMapPage() {
var ref = firebase.database().ref("request");
ref.once("value").then((snapshot) => { // <------ Here!
var a = snapshot.exists(); // true
var c = snapshot.hasChild("reqdetails"); // true
var d = snapshot.child('reqdetails').exists();
var requestsKey = snapshot.key;
var requestsValue = snapshot.val();
snapshot.forEach((childSnapshot) => { // <------ And here!
var requestKey = childSnapshot.key;
var requestValue = childSnapshot.val();
var reqdetails = requestValue.reqdetails;
if (reqdetails) {
this.data = requestKey;
console.log(this.data);
//this.arr.push(requestKey);
//console.log(this.arr);
}
});
this.navCtrl.push(MapPage, { 'param1': this.data });
});
}

Answer 2

You are using a regular function as a callback in snapshot.forEach.
Use arrow function so that this will refer to the class object or use a temporary variable to save this before the call.
snapshot.forEach((childSnapshot) => {
var requestKey = childSnapshot.key;
var requestValue = childSnapshot.val();
var reqdetails = requestValue.reqdetails;
if(reqdetails)
{
this.data = requestKey;
console.log(this.data);
//this.arr.push(requestKey);
//console.log(this.arr);
}
});
Note: Also use arrow function in the outer callback