亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Angular Apollo 將 watchQuery 結果設置為可用變量

Angular Apollo 將 watchQuery 結果設置為可用變量

白衣非少年 2023-02-17 15:17:15
Angular/Apollo/TS 的新手,這讓我抓狂,所以感謝任何幫助。我正在使用 Angular 10、Apollo 和 GraphQL API 設置一個小型應用程序。我最近在 Vue 中構建了同樣的東西,并且認為重新創建該項目是學習 Angular 的好方法。我與 API 的連接正常,我的查詢也是如此,但我不知道如何將結果映射到數組,以便我可以在我的組件中訪問它們。在訂閱中使用 console.log 顯示返回了正確的數據?!皌his”查詢之外的 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;  }}我可以從我的組件調用 getUsers() 函數,'this' 列出了服務,'users' 里面列出了我的查詢結果。但是,服務或組件中 this.users 的 console.log 返回未定義。我嘗試了我能找到的所有類型的示例,包括來自 apollo 文檔的查詢示例,以及來自 hasura.io 的使用 apollo 和 angular 的示例。嘗試使用管道和映射,采摘,只是 valueChanges,幾個不同的訂閱,在函數內設置一個變量來分配數據值,將查詢設置為變量,在組件的 ngOnInit 中設置查詢,以及其他一些事情我確定我忘記了。似乎沒有任何效果。我研究過在設置值之前使用回調來等待查詢返回,但我的理解是我不應該做那樣的事情。我敢肯定這是我在 Apollo 或 Angular 中遺漏或不知道的愚蠢的東西,但我不確定我遺漏了什么。有任何想法嗎?
查看完整描述

3 回答

?
莫回無

TA貢獻1865條經驗 獲得超7個贊

this.getUsers = this.getUsers.bind(this);

在構造函數中?


查看完整回答
反對 回復 2023-02-17
?
一只名叫tom的貓

TA貢獻1906條經驗 獲得超3個贊

usingsetTimeout 不是一個理想的解決方案,您可以直接在訂閱回調函數中更新您的組件變量,并在您的模板中做任何您想做的事情??次业睦?/p>


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>


查看完整回答
反對 回復 2023-02-17
?
繁星點點滴滴

TA貢獻1803條經驗 獲得超3個贊

也許不是理想的解決方案,所以我仍然愿意嘗試其他事情,但我能夠通過在服務中使用帶有計時器的承諾,然后在組件中使用異步等待來獲取組件中設置的值。


服務


  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)

    })

  }

成分


  async getUsers(): Promise<any> {

      this.users = await this.userService.getUsers();

      console.log(this.users);

  }

這允許從服務中設置 this.users。據我所知,當 Angular 開始設置值時,Apollo 仍在運行查詢,導致值最初顯示為未定義,但我的服務在控制臺中具有來自查詢的值。不確定 Apollo 或 Angular 是否有更好的方法來解決這個問題,但如果有的話,我很想聽聽。


查看完整回答
反對 回復 2023-02-17
  • 3 回答
  • 0 關注
  • 141 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號