无法导航：无法读取undefined.ERROR的属性'lng'错误：未捕获（承诺）：TypeError：无法读取未定义的属性'lng'

我想根据服务的位置信息显示位置图。我得到的位置信息correctly.But我得到html.Where一个未定义的错误做我犯错误无法导航：无法读取undefined.ERROR的属性'lng'错误：未捕获（承诺）：TypeError：无法读取未定义的属性'lng'

Map.html

<ion-header> 

<ion-navbar> 
<ion-title>Map</ion-title> 
</ion-navbar> 

</ion-header> 


    <ion-content> 
     <sebm-google-map id="map" [latitude]="map.lat" [longitude]="map.lng" 
     [zoom]="map.zoom"> 
     </sebm-google-map> 
</ion-content>

map.ts

import { Component } from '@angular/core'; 
import { IonicPage, NavController, NavParams } from 'ionic-angular'; 
import {AgmCoreModule,SebmGoogleMap} from 'angular2-google-maps/core'; 
import {DataApi} from '../../app/shared/shared'; 

@IonicPage() 
@Component({ 
selector: 'page-map', 
templateUrl: 'map.html', 


}) 
export class MapPage { 

    map : any; 
    constructor(public navCtrl: NavController, public navParams: 
    NavParams,private dataApi : DataApi) { 
    } 

    ionViewDidLoad() { 
    console.log('ionViewDidLoad MapPage'); 
    let games = this.navParams.data; 
    let tourneyData = this.dataApi.getCurrentTourney(); 
    let location = tourneyData.locations[games.locationId]; 

    this.map = { 
    lat : location.latitude, 
    lng : location.longitude, 
    zoom : 60, 
    markerLabel : games.location 
    }; 
    console.log(this.map.lat); 
    console.log(this.map.lng); 
    console.log(this.map.markerLabel); 
} 

}

数据api.service.ts

import {Injectable} from '@angular/core'; 
import {Http,Response} from '@angular/http'; 

import 'rxjs'; 
import {Observable} from 'rxjs/Observable'; 
@Injectable() 
export class DataApi { 

private url = 'https://ionic2-9dc0a.firebaseio.com'; // https://ionic2-9dc0a.firebaseio.com 
currentTourney : any = {}; 
private tourneyData = {}; 
constructor(private http:Http){ 
} 
    getTournaments(){ 
    return new Promise(resolve =>{ 
     this.http.get(`${this.url}/tournaments.json`) 
     .subscribe(res => resolve(res.json())) 
    }); 
    } 


/* getAdress(): Promise<Team> { 
    return this.http.get(this.url) 
    .map(rsp => rsp.json()) 
    .toPromise(); 
} 
*/  

    getTournamentData(tourneyId,forceRefresh : boolean = false) : Observable<any>{ 

    if(!forceRefresh && this.tourneyData[tourneyId]){ 
     this.currentTourney = this.tourneyData[tourneyId]; 
     console.log("no need to make Http call"); 
     return Observable.of(this.currentTourney); 

    } 
    console.log("about to make Http call") 
    return this.http.get(`${this.url}/tournaments-data/${tourneyId}.json`) 
    .map((response:Response) =>{ 
     this.currentTourney = response.json(); 
     return this.currentTourney; 
    }); 
    } 


    getCurrentTourney(){ 
    return this.currentTourney; 
    } 

    refreshCurrentTourney(){ 
    return this.getTournamentData(this.currentTourney.tournament.id,true); 
    } 

}

来源

2017-04-25 Onur Önder

要设置在ionViewDidLoadthis.map数据被称为一次页面loaded.Check here。

当模板被加载时，您的地图可能不会被设置。只需使用安全导航运营商或?。

<ion-content> 
     <sebm-google-map id="map" [latitude]="map?.lat" [longitude]="map?.lng" 
     [zoom]="map?.zoom"> 
     </sebm-google-map> 
</ion-content>

来源

2017-04-25 10:59:19

你真的很棒。在上周帮助我两次失误。我非常感激。 –

无法导航：无法读取undefined.ERROR的属性'lng'错误：未捕获（承诺）：TypeError：无法读取未定义的属性'lng'

回答

相关问题