如何将数据传回同一页面答案

【问题标题】：How to pass data back to the same page如何将数据传回同一页面
【发布时间】：2018-01-07 17:56:39
【问题描述】：

我的目标是将数据传递到同一页面。我无法理解这个概念。顺便说一句，我对离子还是很陌生。

我的request.html 代码从请求 Firebase 控制台检索所有请求。

<ion-header>
  <ion-navbar color="primary">
    <ion-title name="title">Job Requests</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div class="filter">
<button class="islandwide" ion-button large>Islandwide</button>
<button class="nearby" ion-button large (click)="openMapPage()">Nearby</button>
 </div>

<ion-list>
  <ion-card *ngFor="let user of request | async" class="job">
     <button ion-item (click)="goToJobDetails(user.$key)" class="info">
    <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>

</ion-content>

我的构造函数：

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

  }

我的openMapPage() 方法

这个方法基本上返回所有只有reqdetails的用户，并将数据传回request.html页面

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(RequestsPage, { 'param1': this.data });
    });


}

这是request.html 从请求表中获取所有数据后的样子。这是默认视图，意味着它从 firebase 获取所有请求记录。

现在我正面临这个问题。当用户在request.html 中单击并触发我的openMapPage() 方法时，它将重定向到openMapPage。如何将只有 reqdetails 的用户的数据重定向到同一 html 页面 request.html

到目前为止我已经尝试过了

this.navCtrl.push(RequestsPage, { 'param1': this.data });

但它仍然显示整个请求，这意味着它没有被过滤。

【问题讨论】：

你的console.log(this.data); 打印的是什么
打印出所有只有reqdetails的用户密钥。
如何传回 request.html 页面？
我的意思是当用户点击附近的按钮后，它会转到 openMapPage 方法，然后它会获取数据并显示到 request.html 页面。

标签： javascript firebase ionic-framework firebase-realtime-database angularfire

【解决方案1】：

好的，解决了。

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.getRequest = this.angFire.list('request', {
                   query: {
                   orderByChild: 'reqdetails',
                   startAt: 'reqdetails'
            }
         })   

            }
        });
/*        this.navCtrl.push(RequestsPage, {
            thing1: this.data
         });*/

        //this.navCtrl.push(RequestsPage, { 'param1': this.data });
    });     
  }

【讨论】：