如何在Angular 2中将值从可观察值设置为变量答案

【问题标题】：How to set a value from observable to a variable in Angular 2如何在Angular 2中将值从可观察值设置为变量
【发布时间】：2019-04-23 14:46:01
【问题描述】：

我有一个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));
    }
}

上面的代码导致控制台正确显示我试图分配给变量myFinalValue 的AccountName 字段的值。但是，我似乎无法弄清楚我哪里出错了。

当我尝试使用相同的技术来简单地获取值（而不是登录控制台）时，我得到了通用的：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);
    }
}

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

提前感谢您的帮助！

【问题讨论】：

标签： angular typescript angular2-observables

【解决方案1】：

因为你的调用是异步的（回调只有在结束时才起作用，你不知道什么时候），你不能从异步调用中返回值，所以你只需要在调用时赋值完成的。您需要执行与您在 subscribe 方法中获得的 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));
    }
}

【讨论】：

OP 也可能会尝试使用 username.json() 或 username.text()
该解决方案返回未定义。
myFinalValue 只用于绑定，不知道什么时候返回
感谢您的输入 Suren，但我需要来自可观察对象的值才能在服务中使用，而不是在组件/html 模板中使用。有没有办法在服务内部进行绑定而不是在 html 页面中进行绑定？
你知道最好先理解 observables 然后尝试做点什么。 reactivex.io/rxjs 看基础看方法。也许你可以想想如何让你的逻辑

【解决方案2】：

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

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

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

希望有帮助！

【讨论】：