typescript - 在 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())
    }
}

Above 被注入(inject)到下面的组件中。

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 组件的 View 中显示轮胎数量。问题是，当我在 .subscribe 括号内 console.log(this.tiresCount) 时，它记录 4 但记录 undefined 在它之外。这意味着本地属性 tiresCount 没有获得新值，因此它不会在 View 中显示任何内容。

我怀疑我遗漏了一些明显的东西。或者，也许，因为我是新手，所以这里需要了解 Observables 和/或 RxJS。

Answer 1

使用lambda expression “又名，箭头函数”而不是 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 
}