Wie verwendet man Daten vom Dienst in der Komponente?

Question

Ich bin neu in Angular 2 und zu versuchen, diese mehr als 5 Tage in Anspruch nimmt

Ich versuche, die Daten aus dem Dienst nach Pageload zu verwenden, aber die Daten werden immer undefiniert sein, aber es zeigt in HTML-Seite. Der Längenwert kommt von der Serverseite. (Es ist auch wie diese passieren, wenn ich versuche json zu bekommen und console.log es nach aus dem Dienst zu bekommen)

service.ts

import {Injectable} from "angular2/core" 
import {Http, Response} from 'angular2/http'; 
import 'rxjs/Rx' 

@Injectable() 
export class Someservice { 

    getLength(){ 
    this.getLength = "url" 
    return this.http.get(this.getLength).map(res => res.text()); // data should be "1" or "2" or other text 
    } 
} 

component.ts

import {Component, OnInit} from 'angular2/core'; 
import {Someservice} from '../services/service'; 

@Component({ 
selector: 'showcomponent', 
templateUrl: '/components/somecomponent.html', 
providers: [Someservice] 
}) 

export class SomeComponent implements OnInit { 

    length:number; 

    constructor(private _someservice: Someservice){ 
     this._someservice = _someservice; 
    } 

    ngOnInit() { 
     this.Length(); 
     this.UseLength(); 
    } 

    Length(){ 
     this._someservice .getLength() 
     .subscribe(
     data => this.length = data 
     ); 

     console.log("Length : "+this.length); //show undefined 
    } 

    // I want to use length in this 
    UseLength(){ 
     console.log("Length : "+this.length); // still undefined 

     for(var i =0; i< this.length< i++){ 
      console.log("i: "+ i) // nothing run in here because it's undefined 
     } 

     console.log("Done"); 
    } 
} 

View.html

<input type = "text" [ngModel]="length" /> <!-- show length text --!> 

Entschuldigung Wenn meine Frage Sie verwirrt hat.

Answer 1

Sie führen eine Asynchron-Anfrage, so dass Sie Ihren Code in sie ist Rückruf , wie dies

ngOnInit() { 
    this.Length(); 
} 

Length(){ 
     this._someservice .getLength() 
     .subscribe(
     data => this.length = data, 
     error => {}, 
     () => { 
        console.log("Length : "+this.length); // will not show undefined 
        this.UseLength(); 
       } 
     ); 
    }