Question

嗨我想从谷歌api获取城市名称，但下面的错误是我的代码

appcomponent class

 import {Component, OnInit} from 'angular2/core';
    import {marketComponent} from './market.component';
    import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
    import {introComponent} from './intro.component';
    import {geoService} from './service.geo';
    import {JSONP_PROVIDERS}  from 'angular2/http';
    declare var google: any;
    @Component({
        selector: 'my-app',
        templateUrl: 'app/app.component.html',
        directives: [ROUTER_DIRECTIVES],
        providers: [JSONP_PROVIDERS, geoService]
     })
    @RouteConfig([
        { path: '/intro', name: 'Intro', component: introComponent,      useAsDefault: true },
        { path: '/market', name: 'Market', component: marketComponent },
    ])
    export class AppComponent  {
    constructor(private _http: geoService) { }

    public maps;
    public cat_error: Boolean = false;
    public xml_Latitude :string;
    public xml_Lang: string;

    ngOnInit() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(this.showPosition);
        } else {
            alert("Geolocation is not supported by this browser.");
        }
        var input: any = document.getElementById('google_places_ac');
        var autocomplete = new google.maps.places.Autocomplete(input, {});
        google.maps.event.addListener(autocomplete, 'place_changed', function  ()     {
            var place = autocomplete.getPlace();
            console.log(place)
        });
    }

    showPosition(position) {
        this.xml_Latitude = position.coords.latitude;
        this.xml_Lang = position.coords.longitude;

        this._http.getPlaces(this.xml_Latitude, this.xml_Lang).subscribe(
            data => { this.maps = data },
            err => { this.cat_error = true }
        );

        var result = this.maps.results;
        var city = result[0].address_components[4].long_name + "," + result[0].address_components[6].long_name;
        alert(city);


    }  
}

和地理服务文件

 import {Injectable} from 'angular2/core';
    import { Response, Jsonp} from 'angular2/http';
    import 'rxjs/add/operator/map';

    @Injectable()
    export class geoService {

    constructor(private http: Jsonp) { }

    public xml_Latitude: string;
    public xml_Lang: string;

    public getPlaces(xml_Latitude, xml_Lang) {
        return this.http.get(`http://maps.googleapis.com/maps/api/geocode/json?latlng=
                            '${this.xml_Latitude}','${this.xml_Lang}'&sensor=true`)
                .map((res: Response) => res.json())
                .catch(this.handleError);
        }

    private handleError(error: Response) {
            console.error(error);
            return error.json().error || 'Server error';
        }
    }

错误也说getplaces不是一个函数，我想我错过了什么，但不知道是什么....

Answer 1

除了Thierry发现的回调排序问题之外，此行还有一个丢失的this上下文：

navigator.geolocation.getCurrentPosition(this.showPosition);

问题

您有经典的JavaScript问题，称为错误的this上下文。 this keyword in JavaScript的行为与C＃和Java等其他语言的行为不同。

`this`如何运作

函数中的this关键字确定如下： *如果该函数是通过调用.bind创建的，则this值是提供给bind的参数 *如果函数是通过方法调用调用，例如expr.func(args)，然后this为expr * 除此以外 *如果代码位于strict mode，则this为undefined *否则，this为window（在浏览器中）

让我们来看看它在实践中是如何运作的：

class Foo {
    value = 10;
    doSomething() {
        // Prints 'undefined', not '10'
        console.log(this.value);
    }
}
let f = new Foo();
window.setTimeout(f.doSomething, 100);

此代码将打印undefined（或者，在严格模式下，抛出异常）。这是因为我们最终在上面决策树的最后一个分支中。调用了doSomething函数，该函数不是bind调用的结果，并且未在方法语法位置调用。

我们看不到setTimeout的代码，看看它的调用是什么样的，但我们不需要。需要注意的是，所有doSomething方法都指向相同的函数对象。换句话说：

let f1 = new Foo();
let f2 = new Foo();
// 'true'
console.log(f1.doSomething === f2.doSomething);

我们知道setTimeout只能看到我们传递的函数，所以当它调用该函数时，它无法知道提供哪个this。由于引用方法而没有调用，this上下文已丢失。

红旗

一旦您了解this个问题，就很容易发现：

class Foo {
    value = 10;
    method1() {
        doSomething(this.method2); // DANGER, method reference without invocation
    }   
    method2() {
        console.log(this.value);
    }
}

解决方案

这里有几个选项，每个选项都有自己的权衡。最佳选择取决于从不同的呼叫站点调用相关方法的频率。

类定义中的箭头函数

使用arrow function初始化每个实例的成员，而不是使用常规方法语法。

class DemonstrateScopingProblems {
    private status = "blah";

    public run = () => {
        // OK
        console.log(this.status);
    }
}
let d = new DemonstrateScopingProblems();
window.setTimeout(d.run); // OK

好/坏：这会为每个类的实例创建一个额外的闭包。如果此方法通常仅用于常规方法调用，则这是过度的。但是，如果它在回调位置中使用了很多，则类实例捕获this上下文而不是每个调用站点在调用时创建新闭包的效率更高。
好：外部来电者忘记处理this上下文
好：TypeScript中的Typesafe
好：如果函数有参数
错误：派生类无法使用super.
错误：哪些方法是“预先绑定”的确切语义，并且不会在您的类与其使用者之间创建额外的非类型安全合同。

参考站点的功能表达

为了解释原因，这里显示了一些虚拟参数：

class DemonstrateScopingProblems {
    private status = "blah";

    public something() {
        console.log(this.status);
    }

    public run(x: any, y: any) {
        // OK
        console.log(this.status + ': ' + x + ',' + y);
    }
}
let d = new DemonstrateScopingProblems();
// With parameters
someCallback((n, m) => d.run(n, m));
// Without parameters
window.setTimeout(() => d.something(), 100);

好/坏：与第一种方法相比，内存/性能折衷相反
好：在TypeScript中，这具有100％类型安全性
好：适用于ECMAScript 3
好：您只需输入一次实例名称
错误：您必须输入两次参数
错误：不能轻易使用可变参数

Answer 2

我认为您应该将result块移动到与getPlaces方法调用关联的subscribe回调中：

showPosition(position) {
    this.xml_Latitude = position.coords.latitude;
    this.xml_Lang = position.coords.longitude;

    this._http.getPlaces(this.xml_Latitude, this.xml_Lang).subscribe(
        data => {
          this.maps = data;

          var result = this.maps.results; // <----------
          var city = result[0].address_components[4].long_name + "," + result[0].address_components[6].long_name;
          alert(city);
        },
        err => { this.cat_error = true }
    );
}

这是因为在调用回调之前未定义this.maps。并且您尝试在result）之前获取this.maps.results属性。

修改

我也在navigator.geolocation.getCurrentPosition行看到了问题。您可以通过这种方式重构代码：

if (navigator.geolocation) { navigator.geolocation.getCurrentPosition((position) => { // <---- this.showPosition(position); }); } else { alert("Geolocation is not supported by this browser."); }

无法读取未定义的角度2属性错误

2 个答案:

问题

`this`如何运作

红旗

解决方案

类定义中的箭头函数

参考站点的功能表达

无法读取未定义的角度2属性错误

2 个答案:

问题

this如何运作

红旗

解决方案

类定义中的箭头函数

参考站点的功能表达

`this`如何运作