如何在 Angular 2 中将值从 observable 设置为变量

Question

我有一个 UsernameService returns 一个包含 json 对象的可观察对象。在 AnotherService 中，我想从 UsernameService 对象中注入一个值。

到目前为止，我可以从 UsernameService 订阅可观察对象，并且可以在控制台中显示它。我什至可以向下钻取并在控制台中显示对象的值之一。但是，我不明白如何将该值分配给我可以使用的变量。相反，当我尝试将值分配给变量时，在控制台中我得到： 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));
    }
}

上面的代码导致控制台正确显示了我试图分配给变量 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(myFinalValue);
    }
}

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

在此先感谢您的帮助！

Answer 1

因为你的调用是异步的（回调只有在完成时才会起作用，你不知道什么时候），你不能从异步调用中return一个值，所以你只需要调用结束时分配它。您需要执行与在 subscribe 方法中获得的 username 相关的逻辑。您需要创建一个字段来保留 username 的值，以便以后在 class.

中使用

@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

事实证明，由于 observable 是异步的，正如 Suren 所说 "callback will work only when it is finished, you don't know when"，我需要启动订阅组件 ngOnInIt 中的第一个服务的代码。从那里，我需要将订阅值传递给组件中的方法，该方法实际上将服务作为参数调用订阅表单。

这是我的组件的一部分（您可以看到传递给 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() service/method 的服务文件中，我可以轻松地将包含我想要的值的参数分配给变量。

希望对您有所帮助！

如何在 Angular 2 中将值从 observable 设置为变量

How to set a value from observable to a variable in Angular 2

typescript

angular2-observables

angular