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

Question

我完全被这个困住了。我已经在互联网上上下搜索并花了至少两个小时查看 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 回调中将其记录到控制台来检查是否正确检索了预期结果，但我无法将值写入 class 属性我需要它才能继续使用它。

我缺少什么部分？

Answer 1

您可以在调用方订阅您的服务方式即可。

例如 -

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

Answer 2

理想情况下，getSavedProject() 应该 return 一个 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() 方法 return 编辑的数据，您必须 subscribe 到 [=11] =].或者您必须将 getSavedProject() 分配给 class 属性，然后使用 async 管道将其解包到组件模板中。

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

Why can I not pass the HttpClient result to a class property?

angular

angular-httpclient