0

I'm learning Typescript now and i have problem that when i want to do getLocation() function, i want to assign str which declared out of this function to latitude + longitude which is compute in getLocation() function.But it always said that str is undefined.I do not know why.Can some one help me? Thanks!

import { Component, OnInit } from '@angular/core';
import {Http, Response} from '@angular/http';
import 'rxjs/Rx';
import {Observable} from 'rxjs/';

@Component({
  selector: 'app-center',
  templateUrl: './center.component.html',
  styleUrls: ['./center.component.css']
})
export class CenterComponent implements OnInit {
  dataSource: Observable<any>;
  locationInfo: any;
  str: any;
  constructor(public http: Http) {
  }
  ngOnInit() {
  }
  location() {
    this.getLocation();
    //console.log(this.str);
    //this.getInfor();
  }
  getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(this.showPostion.bind(this), this.showError.bind(this));
    }
  }
  showPostion(position) {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    this.str = String(latitude + ',' + longitude);
    console.log(this.str);
  }
  showError() {
    console.log('Invalid Address !');
  }
  getInfor() {
    this.dataSource = this.http.get('https://maps.googleapis.com/maps/api/geocode/json?'
      + 'latlng=' + this.str + '&key=<mykey>').map(Response => Response.json());
    this.dataSource.subscribe(
      data => this.locationInfo = data
    );
  }
}
2
  • 1
    I'm not the most familiar with Angular 2 and Typescript, but I don't understand when this.str gets set. I see that it gets set in showPostion, which gets called by getLocation, which gets called by location, which gets called where? Commented Nov 3, 2017 at 1:22
  • The code seems ok, did you log the position variable to see what it contains when showPosition is called? Of course str is empty in the location() method, since getLocation did not return anything yet. You could init your component with str : string = "finding position" to make sure it's never undefined. Commented Nov 3, 2017 at 9:46

2 Answers 2

2

To autobind you can use arrows:

location() {

becomes:

location = () => {

More

Arrow functions https://basarat.gitbooks.io/typescript/docs/arrow-functions.html

Sign up to request clarification or add additional context in comments.

2 Comments

I'm still confused about bind.I just want to assign the global "str" to the value that get in getLocation() as in java.But it does not work in Typescript.Do you have any idea how to change the code?Thank you for your reply!
It's a neat syntax but I don't see how this answers the question, since you're just suggesting a different way to bind this when it was being bound fine anyway.
0

It looks like this is in scope everywhere that you use it, so I guess the issue is that this.str is accessed before it has been assigned a value.

navigator.geolocation.getCurrentPosition is asynchronous, and fires the callback to set the position on success.

You haven't shown us when this.getInfor gets called (perhaps it's obvious to someone familiar with angular) but I suspect that it is before the callback has been fired, so this.str has not yet been assigned a value.

So the solution would be to rearrange the code so the this.str was assigned a value before you try to access it.

1 Comment

You mean I need to assign a value for "str"? But when i do this and then i use location().When i log "str", it is still the value i assigned before, rather the value i expected to be.I expect that "str" should be the value in showPosition().Simply, I just want to make "str" global as in java so that i can use it anywhere.Do you have any suggestion?Thanks~

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.