如何在 Angular 中显示 @feathersjs-client 结果答案

【问题标题】：how to display @feathersjs-client results in Angular如何在 Angular 中显示 @feathersjs-client 结果
【发布时间】：2019-09-08 15:58:19
【问题描述】：

正在使用 feathers-chat-angular 代码作为指南将 feathersjs-client 集成到 Angular 前端。后端启动并运行：MongoDB、Mongoose、express/feathers 服务器。能够从前端检索数据，但无法显示响应数据。目前未使用羽毛反应。警告初学者@work ...

正在研究 Observables 但总是遇到：错误：未捕获（承诺中）：TypeError：this.dataService.issues$(...).pipe...不是函数。

基本上玩过 .map() 和 .subscribe() ，同样不是函数错误。提前谢谢。

编写 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() {
  } 
}

代码数据服务：

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

【问题讨论】：

FeathersService 代码丢失...上传它以便我们为您提供帮助
添加了羽毛服务代码。 Thxs 提前检查
feathers service find 函数返回一个承诺吗？

标签： angular rxjs observable feathersjs

【解决方案1】：

根据feathersjs documentation，看起来find 函数正在返回Promise：

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

在这种情况下，您需要使用from 运算符将您的承诺作为可观察对象返回，如下所示：

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

在您的代码中实现：

代码数据服务：

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

【讨论】：