Angular - 从 GraphQL 返回数据

Posted 2023-03-10

【中文标题】Angular - 从 GraphQL 返回数据

【英文标题】：Angular - Returning data from GraphQL

【发布时间】：2019-04-22 05:23:54

【问题描述】：

所以，我在使用 Angular 时遇到了问题。我需要将一些用户数据存储在 graphcool 中，以便我可以使用名称（字符串）和余额（数字），但它仅在我在 html 中调用 userName 和 userBalance 时才有效，而不是在 TS 中，这是我的 TS 组件：

public userName: Observable<string>;
public userBalance: Observable<number>;

public getUserById: string;

constructor(
  private activatedRoute: ActivatedRoute,
  private userService: UserService
) 
  this.getUserId = this.activatedRoute.snapshot.params['userId'];
  this.userName = this.userService.getUserById(this.getUserId)
    .pipe(map(res => res[0].name));
  this.userBalance = this.userService.getUserById(this.getUserId)
    .pipe(map(res => res[0].balance));

这是 UserService.ts 中的 getUserById() 方法：

getUserById(userId: string): Observable<User[]> 
  return apollo
    .query<AllUsersQuery>(
      query: SINGLE_USER_QUERY,
      variables: 
        userId
      
    ).pipe(
        map(res => res.data.allUsers)
    );

每当我尝试将userName 和userBalance 打印到控制台时，它都会返回Observable 而不是字符串和数字。但是，在 HTML 中，这很好用：

<div>Name: 
  <p> userName | async </p>
</div>
<div>Balance:
  <p>$  userBalance | async </p>
</div>

我猜这与异步有关。如何将与我在 HTML 中获得的相同值返回到我的 TS 背景？

我认为指出我尝试使用 .subscribe 而不是 .map 并且我可以在控制台上看到实际值，但在订阅之外，这些值没有显示，这也很重要。

感谢您的关注！

【问题讨论】：

您的 userName 和 userBalance 变量确实是 Observables，这就是为什么当您在 TypeScript 中将它们记录到控制台时会看到它们。模板中的async 管道负责为您订阅Observable，这就是为什么您会看到那里的值而不是Observable。你想在你的 TypeScript 文件中用这些值做什么？了解这一点有助于为您提供一些有关如何处理此问题的代码。

@DanielWSrimpel 我只是在这个项目的开始，但我假设将来我需要userBalance 值来应用一些数学，更新这个值然后将它发送回数据库。这就是为什么我正在寻找一种简单的方法来获得这个值，不仅在这个组件中，而且在我可能需要操纵它的任何地方（例如存款/取款系统）。有可能吗？

使用 userBalance 进行计算的反应式方法是使用 RxJS 运算符，如 map（如果您需要来自多个 Observable 的值，则使用 combineLatest）。如果您没有使用 RxJS 的经验，最简单的方法是在您的组件类中设置一个变量，该变量是您在 subscribe 函数中设置的。 this.userName.subscribe(name=>this.userNameValue = name)

【参考方案1】：

正如 Daniel W Strimpel 所提到的，您使用的变量确实是可观察的，并且异步管道正在处理订阅并显示值。 如果您需要这些价值，您可以通过这两种方式中的任何一种进行。

按照 Benjamin Kindle 的建议，在用户名订阅中使用不同的变量。

this.userName.subscribe(name=>this.userNameValue = name)

直接从 observable 中访问它的值

this.userName.value

希望有帮助！