1

我试图简单地将Angular2中模板中的变量绑定到服务的变量。该服务应该通过 http 加载数据，然后再次相应地更新模板中的视图（我假设更改检测应该这样做，绑定也应该这样做）。然而我无法让它发挥作用。显示服务中变量的初始值。http请求也被执行，恕我直言，再次设置变量。然而视图没有更新。

import {Component} from 'angular2/core';
import {HTTP_PROVIDERS, Response, Http} from 'angular2/http';

@Component({
    providers: []
})
export class AddressService{
    ipaddress: String='evaluating';
    constructor(private http:Http) {}
    getIp(){
        this.http.get('http://ip.jsontest.com/')
            .subscribe(
                data => this.processResponse(data.json()),
                err => this.logError(err)
            );
    }
    logError(err) {
        console.error('There was an error: ' + err);
    }
    processResponse(data){
        console.log(data.ip);
        this.ipaddress='data.ip';
    }
}

@Component({
    selector: 'address-app',
    template: '<div>your IP Address is:&nbsp;{{addressService.ipaddress}}</div>',
    providers: [AddressService]
})
export class App {
    constructor(private addressService: AddressService){
        this.addressService.getIp();
    }
}

使用简单的 boot.ts 引导应用程序

import {bootstrap}    from 'angular2/platform/browser'
import {HTTP_PROVIDERS} from 'angular2/http';
import {App} from 'app.ts'

bootstrap(App, [HTTP_PROVIDERS]);

我为此 http://plnkr.co/edit/75VVjEUSflbvh3oG8Kwk?p=preview创建了一个 plunker，该服务只需请求 IP，然后应该更新显示 - 但这仍然是原始值（评估）。这在 Angular 1 中很简单直接，我不确定我在这里做错了什么才能在 Angular 2 中获得相同的结果。

4

1 回答 1

1

您应该添加angular2-polyfills到您的项目中（请参阅此 plunk）：

<script src="//code.angularjs.org/2.0.0-beta.0/angular2-polyfills.min.js"></script>

PS请不要将@Component装饰器用于服务。改为使用@Injectable。

于 2015-12-19T14:14:48.757 回答