如何在页面之间传递数据

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 的我的 OpenPage 方法

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

});   



}

所以当用户从 request.html 中点击 OpenMapPage() 后，它会转到 reqeuest.ts 中的 openMapPage 方法，并将数据渲染到 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

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

    });

注意：在外部回调中也要使用箭头函数

Answer 2

您应该使用 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 });
    });
}