angular2 rc5 upgrade, iterating over mongo cursor fails

Question

I'm writing a meteor/angular2 app, and I have just upgraded to rc5. I get an error when I try to show a list of messages based on a mongo cursor in my component. I have tried to distill the code down, please let me know, if you need something more.

Here is the component:

import { Component, OnInit } from '@angular/core';
import { Mongo } from 'meteor/mongo';

import template from './messages-list.component.html';

@Component({
  selector: 'messages-list',
  template
})

export class MessagesListComponent implements OnInit {
  messages: Mongo.Cursor<string>;
  collection: Mongo.Collection<string>

  ngOnInit() {
    // just create an empty local collection for brevity, but it also fails with a named client/server collections 
    this.collection = new Mongo.Collection<string>(null);
    this.messages = this.collection.find();    
  }
}

Here is the html template:

<ul>
  <li *ngFor="let message of messages">
    {{message}}
  </li>
</ul>

This fails with a long stacktrace when I try to view the page, and several nested errors, but I think this seems to be the root of it:

Unhandled Promise rejection: (7)
"EXCEPTION: Error in ./MessagesListComponent class MessagesListComponent - inline template:0:10
ORIGINAL EXCEPTION: TypeError: undefined is not an object (evaluating 'async_1.ObservableWrapper.subscribe')

I can make the code work again by either changing the view or the component code as follows:

View:

<ul>
  <!-- avoid iterating over messages -->
  <!--li *ngFor="let message of messages">
    {{message}}
  </li-->
</ul>

Code:

// use a normal array instead of a cursor
export class MessagesListComponent implements OnInit {
  messages: string[]

  ngOnInit() {
    this.messages = []
  }
}

Here are the dependencies of my package.json:

"dependencies": {
  "@angular/common": "2.0.0-rc.5",
  "@angular/compiler": "2.0.0-rc.5",
  "@angular/core": "2.0.0-rc.5",
  "@angular/forms": "0.3.0",
  "@angular/platform-browser": "2.0.0-rc.5",
  "@angular/platform-browser-dynamic": "2.0.0-rc.5",
  "@angular/router": "3.0.0-rc.1",
  "angular2-meteor": "0.6.2",
  "angular2-meteor-auto-bootstrap": "0.6.0",
  "angular2-meteor-polyfills": "0.1.1",
  "angular2-meteor-tests-polyfills": "0.0.2",
  "es6-shim": "0.35.1",
  "material-design-lite": "^1.2.0",
  "meteor-node-stubs": "0.2.3",
  "reflect-metadata": "0.1.3",
  "rxjs": "5.0.0-beta.6",
  "zone.js": "0.6.12"
}

Does anyone have an idea how to solve this?

Answer 1

I am facing quite the same issue, as you can see here .

First I had the error message "NgFor only supports binding to Iterables such as Arrays.", as I tried to iterate over a Mongo.Cursor.

The only idea I found was to fetch the cursor and to use an array instead. But the array did not contain any data, so I concluded that maybe there is no data available on client side and it's a Meteor issue. Maybe I am wrong and there is just an another way to transform the data from the cursor.

Today I also tried to solve this issue according to this file , but setting up this project failed.

Unfortunately, I did not find any useful and working examples according Angular 2 RC 5 and meteor mongo cursors, but I continue searching.