如何从变量返回数据并将其传递给html页面

时间:2017-08-09 02:11:52

标签: javascript firebase ionic-framework firebase-realtime-database ionic3

如何从变量返回数据并将其传递给html页面。

好的我现在面临一个问题。我想从firebase返回当前用户地址附近的用户地址的所有记录。我成功地通过console.log(AllUserAddress)返回所有用户的地址在当前用户地址附近。但现在我的问题是如何将记录返回到request.html页面。

我在if-else语句中这样做了。但它不起作用。如您所见,我使用if-else语句来检查计算的距离是否小于限制。如果是,则将查询发送到request.html页面。但我尝试了以下方式,它不起作用。

 if(dist < limit)
       {
         console.log(dist);
         console.log(AllUserAddress);


    this.getRequest = this.angFire.list('request', {
      query: {
        orderByChild: 'reqdetail',
        startAt: 'regdetails'
      }
    })


       }

我的openMapPage()

geocoder1.geocode( { 'address': AllUserAddress}, (results, status) => {
    var limit = 10;
    if (status == google.maps.GeocoderStatus.OK) {
      var latitude1 = results[0].geometry.location.lat();
      var longitude1 = results[0].geometry.location.lng();
      this.latlng1 = new google.maps.LatLng(latitude1, longitude1);
      //var userAddress = new LatLng(currentUserAddress);
       //console.log(latlng1);
       var dist: number = parseInt((google.maps.geometry.spherical.computeDistanceBetween(this.latlng,this.latlng1) / 1000).toFixed(2));
       var good = true;



       if(dist < limit)
       {
         console.log(dist);
         console.log(AllUserAddress);


    this.getRequest = this.angFire.list('request', {
      query: {
        orderByChild: 'reqdetails,
        startAt: 'reqdetails'
      }
    })


       }


    } 
  }); 

我的request.html页面

<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()" id="nb">Nearby</button>
 </div>

<ion-list>
  <ion-card *ngFor="let user of getRequest | 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>

我的Firebase控制台。

enter image description here

所以当我点击NearBy按钮时。似乎没有任何表现。

enter image description here

0 个答案:

没有答案