angular2 rc5 upgrade, iterating over mongo cursor fails - mongodb

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.