web-dev-qa-db-ja.com

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

Jsonオブジェクトを含むobservableを返すUsernameServiceがあります。 AnotherServiceでは、UsernameServiceオブジェクトから値を注入します。

これまでのところ、UsernameServiceからオブザーバブルをサブスクライブでき、コンソールに表示できます。コンソールでオブジェクトの値の1つをドリルダウンして表示することもできます。ただし、使用できる変数にその値を割り当てる方法がわかりません。代わりに、変数に値を割り当てようとすると、コンソールで次のようになります：Subscriber {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));
    }
}

上記のコードにより、コンソールは変数AccountNameに割り当てようとしているmyFinalValueフィールドの値を正しく表示します。しかし、どこがおかしいのかわかりません。

（コンソールにログインするのではなく）単純に値を取得するために同じ手法を使用しようとすると、汎用：Subscriber {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 => this.username = username.data[0].AccountName);
        console.log(myFinalValue);
    }
}

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

よろしくお願いします！

angulartypescriptangular2-observables
6
Sol

オブザーバブルは非同期であり、スーレンが「コールバックは終了したときのみ動作するので、いつわからない」ので、コンポーネントngOnInItの最初のサービスにサブスクライブしていたコードを開始する必要がありました。そこから、サブスクライブ値をコンポーネントのメソッドに渡す必要がありました。このメソッドは、実際にサービスからサブスクライブをパラメーターとして呼び出します。

これが私のコンポーネントの一部です（getCharges（）メソッドにgetCharges（accountName）として渡されるthis.username値を見ることができます）。

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

次に、getUsernameService.getUsername（）サービス/メソッドを含むサービスファイルで、目的の値を含むパラメーターを変数に簡単に割り当てることができました。

お役に立てば幸いです！

0
Sol

呼び出しは非同期であるため（コールバックは終了時にのみ機能し、いつ実行されるかはわかりません）、非同期呼び出しから値を返すことはできません。したがって、呼び出しが終了したときにのみ値を割り当てる必要があります。 usernameメソッドで取得するsubscribeに関連するロジックを実行する必要があります。後でクラスで使用するために、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));
    }
}
6
Suren Srapyan