Javascript Angular Apollo将watchQuery结果设置为可用变量

Angular/Apollo/TS的新手，这让我抓狂，所以非常感谢您的帮助

我正在使用Angular 10、Apollo和GraphQL API建立一个小应用程序。我最近在Vue中构建了同样的东西，并认为重新创建该项目将是一个很好的方法来获取一些信息

我与API的连接正常，查询也正常，但我不知道如何将结果映射到数组，以便在组件中访问它们。在订阅中使用console.log显示返回了正确的数据。“this”上的查询外部的console.log显示查询结果，但它们从未保存/映射到应设置为的变量

以下是我的服务代码：

import { Injectable } from '@angular/core';

import { Apollo } from 'apollo-angular';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

import gql from 'graphql-tag';

const USER_SEARCH = gql`
  query getUsers {
    search(query: "moose", type: USER, first: 10) {
       nodes {
         ... on User {
           login
           email
           location
           name
         }
       }
       pageInfo {
         hasNextPage
         hasPreviousPage
         startCursor
         endCursor
       }
       userCount
     }
  }`;

export class UserService {
  loading: boolean = true;
  users: [];

  constructor(private apollo: Apollo) { }

  getUsers(): any {
    this.apollo.watchQuery<any>({
      query: USER_SEARCH
    })
      .valueChanges
        .subscribe(({ data, loading }) => {
         this.loading = loading;
         this.users = data.search;
        });
        console.log(this);

    return this.users;
  }
}

从'@angular/core'导入{Injectable}；
从“Apollo angular”导入{Apollo}；
从“rxjs”导入{Observable}；
从“rxjs/operators”导入{map}；
从“graphql标签”导入gql；
const USER_SEARCH=gql`
查询getUsers{
搜索（查询：“驼鹿”，类型：用户，第一个：10）{
节点{
…基于用户{
登录
电子邮件
位置
名称
}
}
页面信息{
下一页
上一页
startCursor
结束光标
}
用户数
}
}`;
导出类用户服务{
加载：布尔值=真；
用户：[]；
构造函数（私有阿波罗：阿波罗）{}
getUsers（）：任何{
这是apollo.watchQuery({
查询：用户搜索
})
.价值变动
.subscribe（{data，loading}）=>{
这个。加载=加载；
this.users=data.search；
});
console.log（this）；
将此文件返回给用户；
}
}

我可以从我的组件中调用getUsers（）函数，“this”列出了服务，其中“users”列出了我的查询结果。但是，服务或组件中this.users的console.log返回未定义

我已经尝试了我能找到的每种类型的示例，包括apollo文档中的查询示例，以及hasura.io中使用apollo和angular的示例。尝试使用管道和映射、Pulk、valueChanges、一些不同的订阅、在函数中设置变量以将数据值分配给、将查询设置为variable、在组件中的ngOnInit中设置查询，以及其他一些我肯定忘记的事情。似乎什么都不管用。我考虑过在设置值之前使用回调等待查询返回，但我的理解是，我不应该做任何类似的事情。我肯定阿波罗或安格鲁号让我错过了或不知道的一些愚蠢的东西，但我只是不确定我错过了什么

有什么想法吗？

this.getUsers=this.getUsers.bind（this）；

---

在构造函数中？

可能不是理想的解决方案，因此我仍然愿意尝试其他事情，但我能够通过在服务中使用带计时器的承诺，然后在组件中使用异步等待，在组件中获得设置的值

服务

  getUsers(): any {
    return  new Promise((resolve, reject) => {
      let me = this;
      this.apollo.watchQuery<any>({
        query: USER_SEARCH
      })
        .valueChanges
          .subscribe(({ data, loading }) => {
           this.loading = loading;
           this.users = data.search;
         });

      setTimeout( function() {
        if(me.users !== 'undefined'){
          resolve(me.users)
        }
      }, 1000)
    })
  }

getUsers（）：任意{
返回新承诺（（解决、拒绝）=>{
让我=这个；
这是apollo.watchQuery({
查询：用户搜索
})
.价值变动
.subscribe（{data，loading}）=>{
这个。加载=加载；
this.users=data.search；
});
setTimeout（函数（）{
如果（me.users！=“未定义”）{
解析（me.users）
}
}, 1000)
})
}

组成部分

  async getUsers(): Promise<any> {
      this.users = await this.userService.getUsers();
      console.log(this.users);
  }

async getUsers（）：承诺{
this.users=等待this.userService.getUsers（）；
console.log（this.users）；
}

这允许从服务中设置This.users。据我所知，当Angular开始设置值时，Apollo仍在运行查询，导致值最初显示为未定义，但我的服务具有控制台中查询的值。我不确定是否有更好的方法与阿波罗或角度来解决这个问题，但如果是这样的话，我很想听到它

---

谢谢

使用

setTimeout

不是一个理想的解决方案，您可以直接在subscribe回调函数中更新组件变量，并在模板中对其执行任何操作。看看我的例子

getItems() {
    this.apollo
      .watchQuery({
        query: this.getItemsQuery,
      })
      .valueChanges.subscribe((result: any) => {
        this.items = result?.data?.items;
      });
  }

和在模板中

<mat-option *ngFor="let item of items" [value]="item.price">
    {{ item.name }}
</mat-option>
            
 
     
            

{{item.name}

谢谢你的建议！这并不是直接起作用，但绑定范围至少给了我一些新的东西。谢谢你！