A newbiew dumb question

help
1

I am trying to learn meteor and angular 2 at the same time, but I am stuck…

My problem is here https://github.com/MGDSoft/meteor-playground/blob/master/client/app.ts#L27

Tasks.find({}) Allways is getting void. But “Sometimes” when i play with L29 and L30 It returns values…

  • Autopublish is enabled…
  • I did a meteor reset
  • At start server, I insert 3 rows in tasks collection. meteor mongo. db.tasks.find() get 3 lines

Im going crazy :frowning:

Thanks in advance…

2

I can’t tell you exactly how to fix this as I’ve not done anything with Angular but I believe what you are experiencing is a race condition between the data being published to the client and the page rendering. Some sort of check to see if the data is published should yet should fix this.

3

Yep I think you are right. Because if I load the data with a button it works and show all data. (But It throw another error: TypeError: Converting circular structure to JSON.)

But speaking the first error, how is possible the angular 2 tutorial works perfectly?? http://www.angular-meteor.com/tutorials/socially/angular2/3-way-data-binding . We are doing the same things

copleykj thanks for your help!

4

I’m not sure and would likely have to dig into their code to answer. They either have to have checks to delay render or rerender once data is available, or have data already available by using something like fast-render.

5

Just keep following the tutorial.

In step 9, you will publish the collection in the server side.

And then use this in your client side.

this.subscribe('parties', () => {
  this.parties = Parties.find();
}, true);

This can make sure it always has value.

Also in a real world app, you need subscribe the data in the Service instead of Component.

Once you have enough Angular 2 feeling. You can read Subscribe data in Service using RxJS 5.

6

Finally I found the cause of the fault.

{{ tasks | json }} https://github.com/MGDSoft/meteor-playground/blob/master/client/app.ts#L13

This creates a strange behavior

If I delete that line or replace for {{ tasks.fetch() | json }} It works correctly.

Thanks to copleykj and Hongbo_Miao for your help!

7

@mgdsoftware Glad to hear you found the error.

Tasks.find();
returns
Mongo.Cursor<Task>

Tasks.find().fetch();
returns
Task[]
or same Array<Task>

Pipe json from Angular 2 does not apply on Mongo.Cursor from Meteor.

1 Like