title: Unable to show Mongodb collection data into angular2 using ngFor with angular2 meteor
body: <p>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:</p>
  
  <blockquote>
    <p>Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.</p>
  </blockquote>
  
  <p>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. </p>
  
  <p>How can I get an array of all the objects inside the returned bookmarks variable returned using the .find() method?</p>
  
  <p>My component is as below: </p>
  
  <pre><code>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&lt;Object&gt;;
    constructor() {
      this.bookmarks=Bookmarks.find();
      console.log(this.bookmarks);
    }
  }
  </code></pre>
  
  <p>here is the html template:</p>
  
  <pre><code>&lt;tbody&gt;
      &lt;tr *ngFor="let bookmark of bookmarks"&gt;
          &lt;td&gt;{{bookmark.title}}&lt;/td&gt;
          &lt;td&gt;{{bookmark.url}}&lt;/td&gt;
          &lt;td&gt;{{bookmark.category}}&lt;/td&gt;
          &lt;td&gt;&lt;button class="btn btn-danger"&gt;Delete&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p><a href="http://i.stack.imgur.com/SoKFY.png" rel="nofollow">Error Snapshot</a></p>