时间戳

首页 > 解决方案 > Angular - 从 GraphQL 返回数据

html - Angular - 从 GraphQL 返回数据

问题描述

所以，我在使用 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));
}

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

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，我可以在控制台上看到实际值，但是，在订阅之外，这些值没有显示。

感谢您的关注！

标签： htmlangularrxjsgraphqlapollo

解决方案

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

  1. 正如 Benjamin Kindle 所建议的，在 userName 订阅中使用不同的变量。

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

  2. 直接从 observable 访问它的值

    this.userName.value

希望有帮助！

推荐阅读