Angular - возврат данных из GraphQL - PullRequest
Новая
       7

Angular - возврат данных из GraphQL

0 голосов
/ 19 ноября 2018

Итак, у меня возникла проблема при работе с Angular. Мне нужно получить некоторые пользовательские данные, хранящиеся в Graphcool, чтобы я мог работать с именем (строка) и балансом (число), но это работает только тогда, когда я вызываю userName и userBalance в HTML, а не в 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, и я мог видеть действительные значения на консоли, но за пределами этой подписки значения не отображались.

Спасибо за внимание!

1 Ответ

0 голосов
/ 16 января 2019

Как отметил Дэниел В. Стримпел, используемые вами переменные действительно являются наблюдаемыми, и асинхронный канал заботится о подписке и отображает значение. Если вам нужна ценность тех, вы можете пойти одним из этих двух способов.

  1. В подписке userName есть другая переменная, как предложил Бенджамин Киндл.

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

  2. Доступ к его значению непосредственно из наблюдаемой

    this.userName.value

Надеюсь, это поможет!

...