为什么我不能将 HttpClient 结果传递给类属性？答案

【问题标题】：Why can I not pass the HttpClient result to a class property?为什么我不能将 HttpClient 结果传递给类属性？
【发布时间】：2019-08-02 13:30:43
【问题描述】：

我完全被这个困住了。我在互联网上上下搜索，至少花了两个小时在 HttpClient 上查看 SO 答案，但没有得到任何结果。

我有这个应该从 REST 端点检索一些数据的基本服务

import { Injectable, Inject } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class UtilityService {
  public getSavedProject() {
    return this.http.get(this.baseUrl + 'api/ProjectAction/RetrieveActions');
  }
}

此代码随后将用于我添加以下代码的第二个服务中

@Injectable({
  providedIn: 'root'
})
export class ProjectTreeActionService {
  //...
  private data;

  constructor(private utilityService: UtilityService) {}

  getSavedProject() {

    this.utilityService
      .getSavedProject()
      .subscribe((result) => this.data = result[0].toString() );

    return this.data;
  }

这是每个教程和示例中或多或少描述的最基本的行为。但是在我的情况下，最后一行 return this.data 总是给我一个 undefined。

我已经通过在subscribe 回调中将预期结果记录到控制台来检查是否正确检索了预期结果，但是我无法将值写入我需要它继续使用它的类属性。

我错过了什么？

【问题讨论】：

您正在异步调用 ProjectTreeActionService 的 getSavedProject() 函数。尝试在 this.data = result[0].toString() 之后放置 'return this.data'
这里只是问了同样的问题stackoverflow.com/questions/57040160/…
您缺少的部分是异步。当您执行utiliService.getSavedProject().subscribe(...) 时，您基本上告诉您的程序：“获取utiliService.getSavedProject 返回的observable 的结果”并将其值分配给类属性data。然后返回类属性data，即undefined 因为你还没有结果。然后你有了结果并将它的值分配给数据，但为时已晚。
This could help you to get a better understanding
感谢您的提示，我终于解决了这个问题。

标签： angular angular-httpclient

【解决方案1】：

理想情况下，getSavedProject() 应该返回一个 Observable 包装您应该在 getSavedProject() 方法中映射的值。

来，试试看：

@Injectable({
  providedIn: 'root'
})
export class ProjectTreeActionService {

  private data;

  constructor(private utilityService: UtilityService) {}

  getSavedProject() {
    return this.utilityService
      .getSavedProject()
      .pipe(
        map(result => result[0].toString())
      );
  }
}

假设此方法将在组件中使用，要提取getSavedProject() 方法返回的数据，您将必须使用subscribe 到getSavedProject()。或者您必须将getSavedProject() 分配给一个类属性，然后使用async 管道在组件模板中解开它。

【讨论】：

@MarkusDeibel 我认为这应该是一个公认的答案。这对您正在寻找的内容更相关和更好的方式.. :)

【解决方案2】：

您可以在调用者中订阅您的服务方法。

例如——

@Injectable({
  providedIn: 'root'
})
export class ProjectTreeActionService {

  private data;

  constructor(private utilityService: UtilityService) {}

  getSavedProject(): Observable<any> {
    return this.utilityService
      .getSavedProject();
  }
}

当您拥有ProjectTreeActionService 的实例时，您可以在那里订阅它。

this.projectTreeActionServiceInstance.getSavedProject().subscribe(result => {
    //manipulate the result[0].toString() here;
});

【讨论】：

我会接受这个答案，因为它最接近我最终实施的解决方案。