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()，否则地图将不会如另一个问题中所述显示：使用谷歌地图清空离子内容-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

如果这能帮到你，请告诉我。