如何將數據從頁面傳遞到頁面

Question

我的目標是將數據從頁面傳遞到頁面。然而，這個錯誤正在擾亂我。我有申報navCtrl在構造

我對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'); 

    } 

我對request.html html頁面

<button class="nearby" ion-button large (click)="openMapPage()">Nearby</button> 

我對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}); 

}); 



} 

OpenPage方法

因此，在用戶從request.html點擊OpenMapPage（）後，它將轉到openMapPag E法在reqeuest.ts發現，它將數據呈現到map.html頁面

我map.html頁：

<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> 

現在我得到的錯誤是這樣的：

Answer 1

您應該使用Arrow functions。通過使用箭頭功能時，this財產不會被覆蓋，並仍引用組件實例（否則，this關鍵字指向內部函數，和您的組件的方法和變量在它沒有被定義）：

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

您在snapshot.forEach中使用常規函數作爲回調。

使用箭頭功能，使this將引用類對象或使用一個臨時變量調用之前保存this。

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); 
     } 

    }); 

注：還可以使用箭頭功能外回調