在 Angular 2 observable 中使用 RxJS 订阅运算符

Question

这是我的服务 TypeScript 文件。

import {Injectable} from '@angular/core';
import {Http, HTTP_PROVIDERS, Request, RequestOptions, Response, Headers} from '@angular/http';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class CarService {
    constructor(private http: Http) { }
    Url: string = 'url/of/api';
    getCar(){
        var headers = new Headers();
            headers.append('API-Key-For-Authentification', 'my_own_key_goes_here');
            headers.append('Accept', 'application/json');
        var options = new RequestOptions({ headers: headers })
        return this.http.get(this.Url, options)
            .map((res: Response) => res.json())
    }
}

上面被注入到下面的组件中。

import {Component} from '@angular/core';
import {CarService} from 'path/to/car.service';

@Component({
    selector: 'home',
    providers: [ CarService ],
    template: `
        <div>
            <button (click)="getCar()">Get Car</button>
            <h2>The car has {{ tiresCount }} tires.</h2>
        </div>
    `
})
export class Home {
    tiresCount: number;
    constructor(private carService: CarService) { }
    getCar() {
        this.carService.getCar()
            .subscribe(function(data){
                this.tiresCount = data.tires.count;
                console.log(this.tiresCount); // 4
        };
        console.log(this.tiresCount); // undefined
    }
}

我要做的是在单击按钮时在 Home 组件的视图中显示轮胎的数量。问题是，当我在.subscribe 括号内使用console.log(this.tiresCount) 时，它会记录4，但会在其外部记录undefined。这意味着本地属性tiresCount 没有获得新值，因此它不会在视图中显示任何内容。

我怀疑我遗漏了一些明显的东西。或者，由于我是新手，所以这里需要对 Observables 和/或 RxJS 的理解。

Answer 1

在您的订阅方法中使用 lambda expression "aka，箭头函数" 而不是 function(){..}。当使用function(){...}时，里面的this会引用函数本身而不是Home组件类。

getCar() {
    this.carService.getCar()
            .subscribe(data => {
                this.tiresCount = data.tires.count;
                console.log(this.tiresCount); // 4
    });
    console.log(this.tiresCount); // undefined
}
someWhereElse(){
    console.log(this.tiresCount); // 4 , only after getCar().subscribe() resolves 
}