类型错误: 无法读取 null 的属性"map".离子 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 中，异步函数将返回一个承诺，该承诺将在调用函数中使用".then"访问。

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