第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

Angular Apollo 將 watchQuery 結(jié)果設(shè)置為可用變量

Angular Apollo 將 watchQuery 結(jié)果設(shè)置為可用變量

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

3 回答

?
莫回?zé)o

TA貢獻(xiàn)1865條經(jīng)驗(yàn) 獲得超7個(gè)贊

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

在構(gòu)造函數(shù)中?


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

TA貢獻(xiàn)1906條經(jīng)驗(yàn) 獲得超3個(gè)贊

usingsetTimeout 不是一個(gè)理想的解決方案,您可以直接在訂閱回調(diào)函數(shù)中更新您的組件變量,并在您的模板中做任何您想做的事情。看我的例子


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>


查看完整回答
反對 回復(fù) 2023-02-17
?
繁星點(diǎn)點(diǎn)滴滴

TA貢獻(xiàn)1803條經(jīng)驗(yàn) 獲得超3個(gè)贊

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


服務(wù)


  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);

  }

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


查看完整回答
反對 回復(fù) 2023-02-17
  • 3 回答
  • 0 關(guān)注
  • 151 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號