问题
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 ...
Was looking into Observables but always ran into: ERROR: Uncaught (in promise): TypeError: this.dataService.issues$(...).pipe... is not a function.
Played around with .map() and .subscribe() basically, same is not a function error. Thxs in advance.
Code myNg component
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() {
}
}
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();
}
}
Feathers Service:
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);
}
}
回答1:
It looks like find
function is returning a Promise
according to feathersjs documentation:
Service methods must use async/await or return a Promise and have the following parameters
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:
Code DataService:
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());
}
}
来源:https://stackoverflow.com/questions/57792756/how-to-display-feathersjs-client-results-in-angular