TypeError：无法读取 null 的属性“地图”。离子 3 打字稿

Question

因此，我尝试使用从 firebase 提供的数据向我的地图添加标记，但出现上述错误。我检查了其他线程，但没有找到解决我的问题的方法。有人建议它是 package.json 中的损坏包或由于 firebase 的异步代码。我在下面粘贴我的代码。请不要介意我放置异步和等待的地方我试图同步代码以查看是否是问题。

export class LocMapPage {

  @ViewChild('map') mapElement: ElementRef;

  public map: any;
  coords: any;

  constructor(public navCtrl: NavController, public afd: AngularFireDatabase) {

  }

  ionViewDidLoad(){
      this.loadMap();
  }

  async loadMap(){

    try{

      let latLng = new google.maps.LatLng(39.361798, 22.941316);

      let mapOptions = {

        center: latLng,
        zoom: 9,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

      this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);


      var MarkersRef = await firebase.database().ref("/HyperCategories/hyperCats/Locations/Mountain/Mountains/M1/");

    }catch(error){
      console.error(error);
    }

    MarkersRef.orderByChild("coords").on("child_added", function(data) {

        let lat = data.val().latitude;
        let lon = data.val().longitude;

        let myLatLng = {lat: lat, lng: lon};

        let marker = new google.maps.Marker({

          map: this.map,
          animation: google.maps.Animation.DROP,
          position: myLatLng

        });

        console.log(myLatLng);

    });

  }
}

Answer 1

在 Javascript 中，异步函数将返回一个 Promise，该 Promise 将在调用函数中使用 '.then' 访问。

ionViewDidLoad(){
   this.loadMap().then(()=>{
      //success
   });
}