如何在Angular中显示@ feathersjs-client结果 [英] how to display @feathersjs-client results in Angular

问题描述

使用feathers-chat-angular代码作为指导，将feathersjs-client集成到有角前端中的过程.后端运行:MongoDB，Mongoose，express/feathers服务器.能够从前端检索数据，无法显示响应数据.羽毛反应性当前未使用.警告beginner @ work ...

In process to integrate feathersjs-client into an angular frontend using feathers-chat-angular code as a guide. Backend up and running: MongoDB, Mongoose, express/feathers server. Was able to retrieve data from the frontend, got stuck displaying the response data. Feathers-reactive currently not used. Warning beginner@work ...

正在研究Observables，但总是遇到:错误:未捕获(承诺):TypeError:this.dataService.issues $(...).pipe ...不是一个函数.

Was looking into Observables but always ran into: ERROR: Uncaught (in promise): TypeError: this.dataService.issues$(...).pipe... is not a function.

基本上与.map()和.subscribe()一起玩，这不是函数错误.提前致谢.

Played around with .map() and .subscribe() basically, same is not a function error. Thxs in advance.

编码myNg组件

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { Observable, pipe } from 'rxjs';
import { map } from 'rxjs/operators';
import { Issue } from '../../issue.model';
import { Router } from '@angular/router';
import { DataService } from '../../services/data.service';
//import { Paginated } from '@feathersjs/feathers';

@Component({
  selector: 'app-list',   
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ListComponent implements OnInit {
  issues$: Observable<Issue[]>;

  constructor(private dataService: DataService) {
//something goes wrong here !!!
    this.issues$ = this.dataService.issues$();
  }

  ngOnInit() {
  } 
}

代码DataService:

Code DataService:

import { Injectable } from '@angular/core';
import { FeathersService } from './feathers.service';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private feathers: FeathersService) {}

  issues$() {
    let results = this.feathers.service('issues').find();
    console.log(results); //Works records retrieved
    return this.feathers
      .service('issues')
      .find();
  } 
}

羽毛服务:

import { Injectable } from '@angular/core';
import feathers from '@feathersjs/feathers';
import socketio from '@feathersjs/socketio-client';
import io from 'socket.io-client';

@Injectable({
  providedIn: 'root'
})
export class FeathersService {
  private client = feathers();                         
  private socket = io('http://localhost:3030'); 

  constructor() {
    this.client
      .configure(socketio(this.socket))
  };


  //expose services
  public service(name: string) {
    return this.client.service(name);
  }
}

推荐答案

看起来 find 函数正在根据

服务方法必须使用async/await或返回Promise并具有以下参数

Service methods must use async/await or return a Promise and have the following parameters

在这种情况下，您将需要使用 from 运算符将您的诺言作为可观察的形式返回:

In this case, you'll need to return your promise as an observable using from operator like this:

import { from } from 'rxjs';
const observable = from(promise);

---

在您的代码中实现:

---

Implemented in your code:

代码数据服务:

import { Injectable } from '@angular/core';
import { from } from 'rxjs';
import { FeathersService } from './feathers.service';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private feathers: FeathersService) {}

  issues$() {
    let results = this.feathers.service('issues').find();
    console.log(results); //Works records retrieved
    return from(this.feathers
      .service('issues')
      .find());
  } 
}

这篇关于如何在Angular中显示@ feathersjs-client结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！