Как использовать данные из службы в компоненте?

Question

Я новичок в Angular 2 и пытаюсь это сделать более 5 дней

Я пытаюсь использовать данные из службы после pageload, но данные всегда будут неопределенными, но это будет отображаться на странице html. Значение длины исходит от серверной стороны. (Это также случается так, когда я пытаюсь получить JSON и console.log это после того, как получить от службы)

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 --!> 

Извините Если мой вопрос заставил вас смутить.

Answer 1

Вы делаете запрос асинхронной, так что вы должны поместить ваш код в это обратный вызов , как этот

ngOnInit() { 
    this.Length(); 
} 

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