Ionic2：ページに更新が表示されない

Question

ionic2プロジェクトに、google.mapsにマーカーがあるページがあります。 このマーカーをドラッグすると、緯度と経度が更新され、データベースで新しい検索が行われ、新しい結果が表示されます。

import { Component, ViewChild, ElementRef } from '@angular/core'; 
... 

declare var google; 

@Component({ 
    selector: 'page-search', 
    templateUrl: 'search.html' 
}) 

export class SearchPage { 
    @ViewChild('map') mapElement : ElementRef; 
    map        : any; 
    guideList      : Array<Guide>; 
    text       : any; 
    lat        : any; 
    lon        : any; 

    constructor (public navCtrl : NavController, public recoshService: Recosh, public alertCtrl : AlertController) { 
      this.text = { 
       title : this.recoshService.getMessage(1), 
      } 

      if(!this.recoshService.getOkGps()) this.showError(this.recoshService.getMessage(782)); 

      this.refresh(); 
    } 

    refresh(){ 
     console.log("refresh called!"); 
     this.lat = this.recoshService.getLat(); 
     this.lon = this.recoshService.getLon(); 
     this.loadGuides(); 
    } 

    ngOnInit(){ 
     this.loadMap(); 
    } 

    loadGuides() { 
     console.log("loading guides..."); 
     this.recoshService.getGuides().subscribe(
      (data)=>{ 
       if(data.success){ 
        this.guideList = data.supports; 
        for(var i=0; i< this.guideList.length; i++){ 
         if(this.guideList[i].guide==this.recoshService.getMyName()){ 
          this.guideList.splice(i,1); 
          i--; 
          //break; 
         } 
        } 
       }else{ 
        this.showError(this.recoshService.getMessage(data.message)); 
       } 
      }, 
      (err) => { 
       this.showError(err); 
      } 
     ); 
    } 

    myInvitations() { 
     this.navCtrl.push(InvitationsPage); 
    } 

    mySupports() { 
     this.navCtrl.push(MySupportsPage); 
    } 

    showError(msg) { 
     let alert = this.alertCtrl.create({ 
      title: 'Error', 
      subTitle: msg, 
      buttons: ['OK'] 
     }); 
     alert.present(); 
    } 

    loadMap(){ 
     let mapOptions = { 
      center:new google.maps.LatLng(this.lat,this.lon), 
      zoom:5 
     } 

     this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions); 

     let marker = new google.maps.Marker({ 
      position: this.map.getCenter(), 
      icon: { 
       path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW, 
       scale: 5, 
       strokeWeight:2, 
       strokeColor:"#B40404" 
      }, 
      draggable:true, 
      map: this.map, 
     }); 

     google.maps.event.addListener(marker, 'dragend',() => { 
      this.recoshService.setLon(marker.getPosition().lng()); 
      this.recoshService.setLat(marker.getPosition().lat()); 
      console.log("refreshing..."); 
      this.refresh(); 
      console.log("refreshing done!"); 
     }); 
    } 
} 

しかし、動作は非常に奇妙です：

このページのクラスは次のようです。 ページの最初の入口では、ユーザーの位置が正しく表示され、関連する結果が表示されます。マーカーを動かすことによって、変数（lat、lon、guideList）は更新されますが、更新はブラウザー上で表示されません。だから、問題は私のhtmlファイルで観測された変数は、彼らが

<guide-view *ngFor="let g of guideList" [guide]="g"></guide-view> 
... 
<ion-label>{{lat}}</ion-label>...<ion-label>{{lon}}</ion-label> 

を変更した場合でもデータを更新していないということです。しかし、私はそれをこのページをポップし、再度押す移動している場合、すべてが正常に動作します！すべての更新はドラッグアクションで即座に実行され、ブラウザにも表示されます。

私は別の質問で説明したようにマップが表示されなくなります他onIonicViewLoad()に代わりngOnInit()を使用していますハイライトしたい： Empty ion-content with google-map - Ionic2

だから今、私はこの問題を解決していますし、状況アップに基づくを「悪い方法」、プッシュ、ポップを実行することで、このページを開いて、アクションをプッシュ：

this.navCtrl.push(SearchPage); 
this.navCtrl.pop(); 
this.navCtrl.push(SearchPage); 

Answer 1

をあなたが結合一方向を使用してgパラメータを渡しています。現時点でgは入力プロパティと同じですが、マーカーをドラッグすると、値はコントローラに移動せずに前後に移動します。

双方向バインドを使用しようとしましたか？ https://angular-2-training-book.rangle.io/handout/components/app_structure/two_way_data_binding.html

これがあなたに役立つかどうか教えてください。