Unable to show Mongodb collection data into angular2 using ngFor with angular2 meteor

Question

I am very new to mongodb. I am basically trying to retrieve data from a collection and put to screen. Its an angular2-meteor app. I can insert and retrieve data inside the mongo shell. But when I try to loop through the value bookmarks i get the error:

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

When i console log the returned data from the find() method, it returns the entire mongodb objects collection and the boomarks collection is deeply buried inside the object.

How can I get an array of all the objects inside the returned bookmarks variable returned using the .find() method?

My component is as below:

import { Component } from '@angular/core';
import template from './bookmarks.component.html';
import { Bookmarks } from '../../../../collections/bookmarks';
import { Mongo } from 'meteor/mongo';
@Component({
  selector: 'bookmarks-list',
  template
})
export class bookmarksListComponent {
  bookmarks: Mongo.Cursor<Object>;
  constructor() {
    this.bookmarks=Bookmarks.find();
    console.log(this.bookmarks);
  }
}

here is the html template:

<tbody>
    <tr *ngFor="let bookmark of bookmarks">
        <td>{{bookmark.title}}</td>
        <td>{{bookmark.url}}</td>
        <td>{{bookmark.category}}</td>
        <td><button class="btn btn-danger">Delete</button></td>
    </tr>
</tbody>

Error Snapshot

Sunil Biswakarma · Accepted Answer · 2016-09-29 05:16:33Z

2

Found out the solution using rxjs: Instead of working with meteor/mongo, use rxjs and subscribe to the collections.find() method of mongo. Also while newing up the mongo collection use MongoObservable.collections entire code:

bookmarks.component.ts:

import "reflect-metadata";
import { Component, OnInit, NgZone } from '@angular/core';
import template from './bookmarks.component.html';
import { Bookmarks, bookmark } from '../../../../collections/bookmarks';
import { Observable } from 'rxjs';
@Component({
  selector: 'bookmarks-list',
  template
})
export class bookmarksListComponent implements OnInit{
  private bookmarks: bookmark[];
  constructor(private zone: NgZone) {
  }
  ngOnInit(){
    Bookmarks.find({}).zone().subscribe({
      next: bookmarks => {
        console.log("Got Bookmarks: ", bookmarks);
        this.bookmarks=bookmarks;
      }
    });
  }
}

Bookmarks.ts (collections)

import { MongoObservable } from 'meteor-rxjs';
export interface bookmark {
    title: string;
    url: string;
    category: string;
}
export const Bookmarks= new MongoObservable.Collection<bookmark>('bookmarks');

Angular2-rxjs-meteor: Get help from this repo https://github.com/ijager/meteor-rxjs-angular2.0.0-example.git

answered Sep 29, 2016 at 5:16

Sunil Biswakarma

1298 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ATX Over a year ago

Aint the syntax wrong ? Bookmarks.find({}).zone().subscribe({ why the { ?

Amit kumar · Accepted Answer · 2016-10-24 13:39:01Z

0

if you really want to do it using Mongo.Cursor then in your code

constructor() {
this.bookmarks=Bookmarks.find();
console.log(this.bookmarks);
  }

replace this.bookmarks=Bookmarks.find();

with this.bookmarks=Bookmarks.find({}).fetch();

answered Oct 24, 2016 at 13:39

Amit kumar

6,1676 gold badges32 silver badges40 bronze badges

Collectives™ on Stack Overflow

Unable to show Mongodb collection data into angular2 using ngFor with angular2 meteor

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related