Angular 2：无法设置null的属性“location”

Question

我仍然是Angular 2的新手，无法解决这个问题。

我正在尝试获取用户当前位置并将其坐标安全地保存在名为“location”的变量中。尝试完成此操作时，我收到以下错误消息：

代码如下所示：

import { Component, AfterViewInit } from '@angular/core';
import { AngularFire, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2';
import { AgmCoreModule } from 'angular2-google-maps/core';


@Component({
selector: 'app-home',
templateUrl: './app.home.html',
styleUrls: ['./app.home.css']
})
export class HomeAppComponent {
  //restaurants: FirebaseListObservable<any[]>;
  zoom: number = 8;
  lat: number;
  lng: number;
  location: any = {};

  constructor(private af: AngularFire) {
     //this.restaurants = af.database.list('/restaurants');
  }

  ngAfterViewInit() {
     if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(this.setPosition);
     }
  }

  setPosition(position) {
     this.location = position.coords;
     console.log(position.coords);
  }

}

将设置位置设置为：

location.lat = 32;
location.lng = 53;

可以在构造函数中输出它们的值，但是在setPosition函数中它是null。

我做错了什么......

Answer 1

您可以使用箭头功能调用：

navigator.geolocation.getCurrentPosition((pos)=>this.setPosition(pos))

或者如果它没有发送参数，

navigator.geolocation.getCurrentPosition(()=>this.setPosition())

Answer 2

navigator.geolocation.getCurrentPosition(this.setPosition)

应该是

navigator.geolocation.getCurrentPosition(this.setPosition.bind(this))

您的this未引用setPosition

中的页面