Return result to view using Angular 2
flamusdiu opened this issue · comments
I spent a long while trying to figure out how to get a result from a query back to the view. I created a basic injectable class into a componant which setup a model db and then I do databaseService.find({})
which returns a cursor. If I use the callback function, I can see there is results but I cannot figure out how to pass them out of the callback function to the main class to safe my life.
I'm not aware of angular2 in partciular, but for example in angular1 you can set the value in $scope
and then $apply
the scope so it gets updated
@Ivshti Yeah,$scope
doesn't work in Angular 2. It was replaced with the new controller declaration and vars in the class. Looks like I might be able to used a shared service. Umm. Let be get back with you.
@Ivshti Nope, that didn't work.
What I have is this service:
@Injectable()
export class DatabaseService {
private Doc; // database model storage
public res; // returned query data
constructor() {
var LinvoDB = require('linvodb3');
this.Doc = new LinvoDB ("doc");}
public getArticles() {
this.Doc.find({}, function (err, res) {
//console.log (res); <-- shows the list of returned items
this.res = res; // "this" is undefined and even a 'return res' doesn't return the list of docs;
});
}
}
If I just do this.Doc find()
then I get a Cursor
object back which does not seem to have a way to return the results -- at least a way that I've located in the documentation.
if I change it to:
@Injectable()
export class DatabaseService {
private Doc; // database model storage
public res; // returned query data
constructor() {
var Promise = require ('bluebird');
var LinvoDB = Promise.promisifyAll(require('linvodb3'));
this.Doc = new LinvoDB ("doc");
}
public getArticles() {
this.Doc.find({}).execAsync().then( (res) => this.res = res)
}
}
Using it this way returns data after a few secs, however, the view is never updated properly. Maybe Observer/Sub helps here?
Okay, so this works:
import { Injectable } from '@angular/core';
import { Article } from './../models/article';
import { Document } from 'linvodb3';
@Injectable()
export class DatabaseService {
private Doc: Document;
constructor() {
const Promise = require('bluebird');
const LinvoDB = Promise.promisifyAll(require('linvodb3'));
LinvoDB.defaults.store = { db: require('level-js') };
LinvoDB.dbPath = process.cwd();
const modeName:string = "doc";
const schema:Object = Article;
const options:Object = {};
this.Doc = new LinvoDB(modeName, schema, options);
}
public async getArticles(){
return await this.Doc.find({}).execAsync();
}
}
import { Component, OnInit } from '@angular/core';
import { DatabaseService } from '../database/database.service';
import { Article } from '../models/article';
@Component({
selector: 'app-articles-list',
templateUrl: './articles-list.component.html',
styleUrls: ['./articles-list.component.css']
})
export class ArticlesListComponent implements OnInit {
private articles: Document[];
constructor( databaseService: DatabaseService ) {
databaseService.getArticles().then((res) => {
this.articles = res;
});
}
ngOnInit() {
}
}
Is this the proper way of doing this?
Not sure if this right, but it works so I guess I'll close this.