如何在Angular 2中设置从observable到变量的值

时间:2017-10-18 06:29:03

标签: angular typescript angular2-observables

我有一个UsernameService,它返回一个包含json对象的observable。在AnotherService中,我想从UsernameService对象中注入一个值。

到目前为止,我可以从UsernameService订阅observable,我可以在控制台中显示它。我甚至可以向下钻取并在控制台中显示对象中的一个值。但是,我不明白如何将该值赋给我可以使用的变量。相反,当我尝试将值分配给变量时,在控制台中我得到:订阅者{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的{​​{1}}字段的值。但是,我似乎无法弄清楚我哪里出错了。

当我尝试使用相同的技术来简单地获取值(而不是登录控制台)时,我得到了通用:订阅者myFinalValue ......等我之前提到的。

以下是导致我的错误的代码示例:

{closed: false, _parent: null, _parents: null

最终,我的目标是将 username.data [0] .AccountName 的值分配给变量 myFinalValue

提前感谢您的帮助!

2 个答案:

答案 0 :(得分:5)

因为您的呼叫是异步的(回调仅在完成时才起作用,您不知道何时),您无法从异步调用中返回值,因此您只需要分配它通话结束时。 您需要执行与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));
    }
}

答案 1 :(得分:0)

事实证明,由于observable是异步的,并且Suren说“回调只有在完成后才能工作,你不知道什么时候”,我需要启动订阅我的组件中第一个服务的代码ngOnInIt。从那里,我需要将subscribe值传递给实际调用订阅的组件中的方法,将服务作为参数。

这是我的组件的一部分(您可以看到传递给getCharges()方法的this.username值为getCharges(accountName):

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()服务/方法的服务文件中,我可以轻松地将包含我所需值的参数分配给变量。

希望有所帮助!