Angula2 привязывает шаблон к службе

Question

Я пытаюсь просто привязать переменную в шаблоне в Angular2 к переменной службы. Служба должна загружать данные через http, а затем обновлять представление в шаблоне соответственно (я предполагаю, что обнаружение изменений должно это сделать и привязка). Но я не могу заставить это работать. Отображается начальное значение переменной в службе. HTTP-запрос также выполняется, и IMHO снова устанавливает переменную. Однако представление не обновляется.

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]); 

Я создал plunker для этого http://plnkr.co/edit/75VVjEUSflbvh3oG8Kwk?p=preview где служба просто запрашивает IP-адрес, а затем следует обновить дисплей - но это остается на оригинале значение (оценка). Это было легко и прямо вперед в Угловых 1, и я не уверен, что я делаю неправильно здесь, чтобы получить тот же результат в угловом 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.