After upgrade to angular2 rc5, iterating over mongo cursor fails


#1

I’m writing a meteor/angular2 app, and I have just upgraded to angular2 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();    
  }
}

And this 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. I have pasted the entire browser console output here, 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?


#2

Hi @borisjensen I am new in Angular 2 too. In the tutorial you can see that we should use Observable: http://www.angular-meteor.com/tutorials/socially/angular2/3-way-data-binding

I think you solved, but I am checking how to use Anonymous collection and simple schema, if you have any idea please share it.