Angula2將模板變量綁定到服務

我想將Angular2中的模板中的變量簡單地綁定到服務的變量。該服務應該通過http加載數據，然後再次相應地更新模板中的視圖（我假設更改檢測應該這樣做並綁定）。然而，我無法得到這個工作。顯示服務中變量的初始值。 http請求也被執行，並且IMHO再次設置變量。然而這個觀點沒有更新。Angula2將模板變量綁定到服務

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這裏的服務簡單地請求的IP，然後應該更新顯示一個plunker應用程序 - 然而這仍然是原來的價值（評估）。這是很容易和1角直線前進，我不知道我在做什麼錯在這裏得到的角2

來源

2015-12-19 Christian Knoll

相同的結果，您應該添加angular2-polyfills到您的項目（見this plunk）：

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

PS請不要使用@Component修飾器服務。改爲使用@Injectable。

來源

2015-12-19 14:14:48 alexpods

感謝您的答覆..在此期間計算出來。另外@Injectable的作品。也更新了我使用的plunk。 –

Angula2將模板變量綁定到服務

回答

相關問題