Updating data that is passed into child component Angular2

Question

I am new to development in Angular2 - Meteor. I have stumbled upon a problem while working with parent-child components. In the parent component, I have meteor subscribing to a collection.

users: any;

constructor(private _zone:NgZone){


    var sub =  Meteor.subscribe("accounts/users");
    Tracker.autorun(function() {
        _zone.run(function() {
            if(sub.ready()){
                this.users = Meteor.users.find().fetch();
                console.log(this.users);
            }
        });
    });

}

The user collection has 90 users in total. When the app initially loads, only the current user is found, thus the console log shows one user.

I am not sure if my placement of Tracker.autorun() and NgZone are correct, but after a second of the app loading, the console log shows an array of all 90 users. I assume this happens because the subscribe is not ready at first.

My child component takes in the fetched users as a parameter like this <sd-table [data]="users"></sd-table> . Upon loading of the application, there is only one user that is seen on the drawn template of the child component. Is there any way that the template can be updated when the subscribe happens and all users become accessible?

Answer 1

If you want to refer to this of the current class, don't use function()

users: any;

constructor(private _zone:NgZone){
    var sub =  Meteor.subscribe("accounts/users");
    Tracker.autorun(() => {
        _zone.run(() => {
            if(sub.ready()){
                this.users = Meteor.users.find().fetch();
                console.log(this.users);
            }
        });
    });
}

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions