带有geofire angularfire2的离子3

Question

如何在 ionic 3 中正确使用 geofire， 我使用 ionic 3.5 firebase：“4.1.3”， “geofire”：“4.1.2”，“angularfire2”：“4.0.0-rc.1”，

constructor( public angularfireDatabase: AngularFireDatabase,
private geolocation: Geolocation) { } 



ionViewDidLoad() {
  this.geolocation.getCurrentPosition().then((resp) =>
   this.geoQuery= this.geoFire.query({
    center: [resp.coords.latitude, resp.coords.longitude],
    radius: 20  //kilometers
   });            
   this.geoQuery.on("key_entered", function (key, location, distance) {
      console.log('from geofire ' +location, ' key ' + key,distance);
      this.angularfireDatabase.object('/products/'+key).subscribe((product) => {
          this.products.push(product);
      });
   });
  }).catch((error) => {
   console.log('Error getting location', error);
 });
}

返回此错误

ERROR TypeError: Cannot read property 'angularfireDatabase' of undefined
at products.ts:76
at geofire.js:685

geofire.d.ts 的内容

interface GeoQuery {
    center(): number[];
    radius(): number;
    updateCriteria(criteria: GeoQueryUpdateCriteria);
    on(eventType: EventType, callback: (key:string, location: number[], distance: number) => void): GeoCallbackRegistration;
    cancel();
} 
class GeoFire {
    constructor(ref: any);
    ref(): any;
    set(key: string, loc: number[]): Promise<void>;
    get(key: string): Promise<number[]>;
    remove(key: string): Promise<void>;
    query(criteria: GeoQueryCriteria): GeoQuery;
    static distance(location1: number[], location2: number[]);  
} 

声明打字稿的正确方法是什么？简单的例子也不起作用

    public pubVar:any;
    constructor( public angularfireDatabase: AngularFireDatabase,
    private geolocation: Geolocation) { } 



   ionViewDidLoad() {
    this.pubVar = 'hii';
    this.geolocation.getCurrentPosition().then((resp) =>
      this.geoQuery= this.geoFire.query({
       center: [resp.coords.latitude, resp.coords.longitude],
       radius: 20  //kilometers
      });            
     this.geoQuery.on("key_entered", function (key, location, distance) {
      console.log('from geofire ' +location, ' key ' + key,distance);
      console.log(this.pubVar);


   }).catch((error) => {
    console.log('Error getting location', error);
   });
 }

也返回

   Uncaught TypeError: Cannot read property 'pubVar' of undefined

Answer 1

关键字“this”未定义或绑定在您的回调中，因此它以未定义的形式返回。如果您使用粗箭头符号和 key_entered 事件，“this”将在回调范围内：

this.geolocation.getCurrentPosition().then((resp) =>
   this.geoQuery= this.geoFire.query({
    center: [resp.coords.latitude, resp.coords.longitude],
    radius: 20  //kilometers
   });            
   this.geoQuery.on("key_entered", (key, location, distance) => {
      console.log('from geofire ' +location, ' key ' + key,distance);
      this.angularfireDatabase.object('/products/'+key).subscribe((product) => {
          this.products.push(product);
      });
   });
  }).catch((error) => {
   console.log('Error getting location', error);
 });