如何 Graphql Observable 对数组的响应答案

【问题标题】：How to Graphql Observable response to array如何 Graphql Observable 对数组的响应
【发布时间】：2021-02-17 07:18:05
【问题描述】：

如何将 postgraphile 响应转换为 ng 数组？

我的 graphqlclient 查询是：

query MyQuery {
  messages {
    nodes {
      message
    }
  }
}

这是我的回复：(**** let gimsData=client.request(query) *****)

{
  "data": {
    "messages": {
      "nodes": [
        {
          "message": "test "
        },
        {
          "message": "test2"
        }
      ]
    }
  }
}

在我的 page.html 中

<ion-card  button *ngFor="let item of (gimsData | async)" >

TypeError：您在预期流的位置提供了无效对象。您可以提供 Observable、Promise、Array 或 Iterable。

我想我需要管道（映射）或订阅gimsData。在这里感到困惑。谢谢你

【问题讨论】：

标签： angular typescript graphql observable postgraphile

【解决方案1】：

你需要在你有 async 管道的地方提供一个 Observable。所以你可以用 gimsData 制作一个 Observable，它会按照你的意愿工作。

【讨论】：

【解决方案2】：

我找到了没有管道或地图的解决方案。

import { Component } from '@angular/core';
import { request, gql } from 'graphql-request'
import { Observable, of } from 'rxjs';

const query = gql`
query{allLabels {
  edges {
    node {
      labelName
      labelType
    }
  }
}}
`
export interface labeli {
  labelName: string,
  labelType: number
}
export interface nodei {
  node: labeli
}
export interface datai {
  allLabels: {
    edges: []
  }
}

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {

  constructor() {
    this.searchgim()
  }
  ea: nodei[];
  dli: labeli[] = [];
  gimResults: Observable<any>;
  async searchgim() {
    console.log("searchgim function entered");
    await request('http://localhost:5000/graphql', query).then(data => {
      let ddatai: datai = data;
      this.ea = ddatai.allLabels.edges;
      this.ea.forEach(element => {
        let eea: labeli
        eea = element.node
        this.dli.push(eea);
      });

      console.log(this.dli);
      this.gimResults = of(this.dli);

    });
  }
}

【讨论】：