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>

但是如果我通过导航弹出这个页面然后再次推送它，一切正常！所有更新都会在拖动操作时立即完成并显示在浏览器中。

我想强调我正在使用ngOnInit() 而不是onIonicViewLoad() 否则地图将不会按照另一个问题中的描述显示： Empty ion-content with google-map - Ionic2

因此，根据目前的情况，我正在以一种“糟糕的方式”解决这个问题，通过执行推送、弹出、推送操作打开此页面：

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

Answer 1

您正在使用单向绑定传递g 参数。此时g只是作为输入属性，当我们拖动marker时，值并没有到控制器然后来回移动。

您是否尝试使用双向绑定？ https://angular-2-training-book.rangle.io/handout/components/app_structure/two_way_data_binding.html

如果这对你有帮助，请告诉我。