Ionic2：没有更新显示在页面中 [英] Ionic2: no updates displayed in a page
问题描述
我在我的ionic2项目中有一个页面，在google.maps中有一个标记。
当我移动这个标记时（通过拖动）它会更新经纬度和长位置，在我的数据库中进行新的搜索并显示新的结果。
这个页面的类如下：
从'@ angular / core'导入{Component，ViewChild，ElementRef};
...
declare var google;
@Component（{
selector：'page-search'，
templateUrl：'search.html'
}）
导出class SearchPage {
@ViewChild（'map'）mapElement：ElementRef;
map：any;
guideList：Array< Guide>;
text：any;
lat：any;
lon：any;
构造函数（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，
按钮：['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（），
图标：{
path：google.maps。 SymbolPath.BACKWARD_CLOSED_ARROW，
比例：5，
strokeWeight：2，
strokeColor：＃B40404
，
可拖动：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文件观察到的变量即使改变了数据也没有更新数据
$ b $
< guide-view * ngFor =let g of guideList[guide] =g>< / guide-view>
...
< ion-label> {{lat}}< / ion-label> ...< ion-label> {{lon}}< / ion-label>
但是，如果通过浏览我弹出此页面，然后再次推送它，一切工作正常！所有更新都立即通过拖动操作完成，并显示在浏览器中。
我想突出显示我正在使用 ngOnInit（）替代 onIonicViewLoad（）否则映射将不会按照另一个问题中所述显示：
因此，根据目前的情况，我通过执行push，pop，push操作打开此页面，以糟糕的方式解决此问题：
this.navCtrl.push（SearchPage）;
this.navCtrl.pop（）;
this.navCtrl.push（SearchPage）;
传递 g 参数使用单向绑定。此时， g 与输入属性一样，当我们拖动标记时，该值不会到达控制器，然后来回。
您是否尝试使用双向绑定？
https：// angular-2- training-book.rangle.io/handout/components/app_structure/two_way_data_binding.html
让我知道这是否可以帮助您。
I have a page in my ionic2 project where there is a marker in the google.maps. When I move this marker (by dragging) it updates the lat and long position, making new search in my database and so displaying the new results.
The class of this page is the following:
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!");
});
}
}
But the behaviour is very strange. At the first entrance in the page, it takes correctly the user position and displaying the related results. By moving the marker the variables (lat, lon, guideList) are updated BUT no-updates are displaied on the browser. So the issue is that the variables observed by my html file are not updating the data even if they change
<guide-view *ngFor="let g of guideList" [guide]="g"></guide-view>
...
<ion-label>{{lat}}</ion-label>...<ion-label>{{lon}}</ion-label>
But if by navigating I pop it this page and then push it again, everything works correctly! All updateds are done immediatly on drag action and shown into the browser as well.
I wanna highlight that I am using ngOnInit() instead on onIonicViewLoad() else the map will not be shown as described in another question:
Empty ion-content with google-map - Ionic2
So based on the situation up to now I'm solving this issue in a "bad way", by opening this page by performing a push,pop,push actions:
this.navCtrl.push(SearchPage);
this.navCtrl.pop();
this.navCtrl.push(SearchPage);
You are passing g parameter using one-way binding. At this moment, g is just as input property, when we drag the marker, the value does not go to the controller and then back and forth.
Did you try to use two-way binding? https://angular-2-training-book.rangle.io/handout/components/app_structure/two_way_data_binding.html
Let me know if this could help you.
这篇关于Ionic2：没有更新显示在页面中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
