导航失败：无法读取未定义的属性"lng"。错误 错误： 未捕获 (在承诺中)： 类型错误： 无法读取未定义的属性 'lng'

Question

我想根据服务的位置信息显示位置图。我正确地获取位置信息。但是我在html中遇到一个不确定的错误。我在哪里犯错误

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);
 }
}

data-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);
  }
}

Answer 1

您正在在ionViewDidLoad中设置this.map数据，该数据在加载页面后称为。在此处检查页面。

。

加载模板时可能不会设置地图。只需使用安全导航操作员或?。

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