简体   繁体   English

更新传递到子组件Angular2的数据

[英]Updating data that is passed into child component Angular2

I am new to development in Angular2 - Meteor. 我是Angular2-流星开发的新手。 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. 用户集合共有90个用户。 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. 我不确定Tracker.autorun()和NgZone的放置位置是否正确,但是在加载应用程序一秒钟后,控制台日志会显示所有90个用户的数组。 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> . 我的子组件将获取的用户作为参数,例如<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? 发生订阅并可以访问所有用户时,是否可以通过任何方式更新模板?

If you want to refer to this of the current class, don't use function() 如果要引用当前类的this function() ,请不要使用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 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM