Despite following the tutorial for my Meteor application using Angular 2 and Typescript, I am facing difficulty loading server data on the client side. Whether autopublish is turned on or off, I have attempted numerous times to display data from different collections on the client side without success.
My current setup uses Angular 2 RC5 instead of the recommended RC4 in the tutorial. Below is an excerpt from my clients' main.ts file:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
I decided to replicate a simple sample from the tutorial with the "parties" collection (autopublish turned on).
I created a new file both/collections/parties.collection.ts:
import {Mongo} from 'meteor/mongo';
import {Party} from '../interfaces/party.interface';
export const Parties = new Mongo.Collection<Party>('parties');
Instead of using app.component.ts, I opted to bind the collection in another functioning component. Here is how it looks:
import { Component } from '@angular/core';
import { Mongo } from 'meteor/mongo';
import template from './my-component.component.html';
import { Parties } from '../../../both/collections/parties.collection';
import { Party } from '../../../both/interfaces/party.interface';
@Component({
selector: 'my-selector',
template
})
export class MyComponent
{
parties: Mongo.Cursor<Party>;
constructor() {
this.parties = Parties.find();
alert(this.parties.count());
}
}
Checking db.parties.find({}); in the mongo console returns three rows due to server-side inserts made from the tutorial's sample code.
The html template mirrors that of the tutorial:
<ul>
<li *ngFor="let party of parties">
<a [routerLink]="['/party', party._id]">{{party.name}}</a>
<p>{{party.description}}</p>
<p>{{party.location}}</p>
<button (click)="removeParty(party)">X</button>
</li>
The error occurs when alert(this.parties.count()) returns "0", stating "NgFor only supports binding to Iterables such as Arrays.". This issue seems to arise because the client fails to retrieve the data stored on the server.