Question

我试图简单地将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中得到相同的结果。

Answer 1

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

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

PS 请不要使用@Component装饰器进行服务。请改用@Injectable。

Angula2将模板变量绑定到服务

1 个答案: