ObservableからAngular 2の変数に値を設定する方法

Question

私はUsernameServiceを持っています。これはjsonオブジェクトを含むobservableを返します。 AnotherServiceでは、UsernameServiceオブジェクトから値を注入したいと思います。

これまでのところ、私はUsernameServiceから観測可能なものを購読することができ、コンソールに表示することができます。ドリルダウンして、オブジェクトの値の1つをコンソールに表示することもできます。しかし、私はその値を私が使用できる変数に割り当てる方法を理解していません。私はコンソールで、変数に値を代入しようとする代わりに、私が取得：サブスクライバ{closed: false, _parent: null, _parents: null...etc

は、ここで私は成功し、コンソールで観察可能な値を示しています私の例です：

import { UsernameService } from './username.service'; 
import { Injectable, OnInit } from '@angular/core'; 
import 'rxjs/Rx'; 

@Injectable() 
export class AnotherService { 

    username: any[] = []; 

    constructor(private getUsernameService: UsernameService) { } 

    someMethod() { 
     let myFinalValue = this.getUsernameService.getUsername() 
     .subscribe(username => console.log(username.data[0].AccountName)); 
    } 
} 

コードの上変数myFinalValueに割り当てようとしているAccountNameフィールドの値がコンソールに正しく表示されます。しかし、どこが間違っているのか分かりません。

同じテクニックを使用して（コンソールにログインするのではなく）単純に値を取得しようとすると、前述のように一般的な：サブスクライバー{closed: false, _parent: null, _parents: null ...などが表示されます。

ここに私のエラーが発生したコードの例です：

import { UsernameService } from './username.service'; 
import { Injectable, OnInit } from '@angular/core'; 
import 'rxjs/Rx'; 

@Injectable() 
export class AnotherService { 

    username: any[] = []; 

    constructor(private getUsernameService: UsernameService) { } 

    someMethod() { 
     let myFinalValue = this.getUsernameService.getUsername() 
     .subscribe(username => this.username = username.data[0].AccountName); 
     console.log(queryAccountName); 
    } 
} 

最終的には、私の目標はただusername.dataから値を割り当てることです[0]変数myFinalValueにを.AccountName 。

ご協力いただきありがとうございます。

Answer 1

コールが非同期（コールバックが終了したときにのみ機能するため、いつ動作しないか）は非同期コールの値を返すことができないため、コール終了です。 メソッドで取得したusernameに関連するロジックを実行する必要があります。後でクラスで使用するために、usernameの値を保持するフィールドを作成する必要があります。

@Injectable() 
export class AnotherService { 

    username: any[] = []; 
    myFinalValue: string; 

    constructor(private getUsernameService: UsernameService) { } 

    someMethod() { 
     this.getUsernameService.getUsername() 
     .subscribe(username => this.myFinalValue = username.data[0].AccountName)); 
    } 
} 

Answer 2

それは、観察が非同期であるためSurenが言ったように、私が最初に加入したコードを開始するのに必要な「コールバックは、それが終了した場合にのみ動作しますとき、あなたは知らない」ことが判明します私のコンポーネントngOnInItのサービス。そこから、実際にサブスクライブを呼び出すコンポーネントのメソッドにサブスクライブ値をパラメータとして渡す必要がありました。 （getUsernameService.getUsernameとサービスファイルに次に

getCharges(accountName) { 
    this.getChargesService.getCharges(accountName) 
    .subscribe((charges) => { 
     this.charges = charges.data; 
     }, (error) => console.log(error) 
    ) 
    } 


ngOnInit() { 
this.getUsernameService.getUsername() 
    .subscribe(username => { 
     this.username = username.data[0].AccountName; 
     this.getCharges(this.username); 
     }) 
    } 

：

ここで作品が私のコンポーネントをフォームの（あなたはgetChargesとしてthis.usernameのgetChargesに渡された値（）メソッド（アカウント名）を見ることができます）サービス/メソッド、私は簡単に変数に自分の希望する値を含まれるパラメータを割り当てることができました。

希望に役立つこと！