Typescript class 变量 return 在 Firebase 函数中未定义

Question

我来自 python/golang 背景，现在我深入研究了 ionic2。我想知道我是否在做一些愚蠢的事情，或者有一个问题，根据我目前对堆栈的了解，我无法分辨它来自哪里。也许我只需要一种方法来引用此函数的外部范围。好吧，我正在遍历我的用户集合并像这样将数据打印到控制台，代码库位于问题下方：

page1.ts:81 key -KFoJ-oF-ll04zmxJZiL
page1.ts:88 data Object {email: "sdcsd@gmail.com", username: "cesscd"}
page1.ts:89 user UserAllowed {email: "sdcsd@gmail.com", username: "cesscd"}

但是当我尝试将新用户推送到允许的用户数组时，我得到了这个错误；

FIREBASE WARNING: Exception was thrown by user callback. TypeError: Cannot read property 'alloweduser' of undefined
    at http://localhost:8100/build/js/app.bundle.js:98:21
    at https://cdn.firebase.com/js/client/2.4.1/firebase.js:200:356
    at Kc.h.ka (https://cdn.firebase.com/js/client/2.4.1/firebase.js:35:275)
    at Kc.h.ka (https://cdn.firebase.com/js/client/2.4.1/firebase.js:35:268)
    at Kc.h.ka (https://cdn.firebase.com/js/client/2.4.1/firebase.js:35:268)
    at Kc.h.ka (https://cdn.firebase.com/js/client/2.4.1/firebase.js:35:268)
    at Ec.h.ka (https://cdn.firebase.com/js/client/2.4.1/firebase.js:32:465)
    at fe.h.R (https://cdn.firebase.com/js/client/2.4.1/firebase.js:83:379)
    at W.forEach (https://cdn.firebase.com/js/client/2.4.1/firebase.js:200:326)
    at http://localhost:8100/build/js/app.bundle.js:88:22

代码库

export class Page1 {
    reponse:string;
    firebaseUrl:string;
    userRef:Firebase;
    alloweduser: UserAllowed[];
    constructor() {
        this.firebaseUrl = "https://fghghgf-hefghgfhat-gh.firebaseio.com/web/data/";
        this.userRef = new Firebase(this.firebaseUrl).child("users");
    }

        ngOnInit(){
        this.alloweduser=[];
        this.userRef.once("value", function(snapshot) {
            // The callback function will get called twice, once for "fred" and once for "barney"
            snapshot.forEach(function(childSnapshot) {
                // key will be "fred" the first time and "barney" the second time
                var key = childSnapshot.key();
                console.log("key",key);
                // childData will be the actual contents of the child
                var childData = childSnapshot.val();
                var user = new UserAllowed("","");
                var user = new UserAllowed(childData.username,childData.email);
                console.log("data",childData);
                console.log("user",user);
                //Why this.alloweduser get undefined inside this function?
                this.alloweduser.push(user);
            });
        });
    }

    }


    // TypeScript
class UserAllowed {
    // Property (public by default)
    email: string;
    username: string;
    // Constructor
    // (accepts a value so you can initialize engine)
    constructor(username:string, email: string) {
        this.email = email;
        this.username = username;
    }
}

Answer 1

您在回调函数中使用 this，它具有不同的含义。一种解决方案是对回调使用 fat-arrow/rocket 表示法，这可确保 this 符合您的预期：

    this.userRef.once("value", (snapshot) => {
        // The callback function will get called twice, once for "fred" and once for "barney"
        snapshot.forEach((childSnapshot) => {
            // key will be "fred" the first time and "barney" the second time
            var key = childSnapshot.key();
            console.log("key",key);
            // childData will be the actual contents of the child
            var childData = childSnapshot.val();
            var user = new UserAllowed("","");
            var user = new UserAllowed(childData.username,childData.email);
            console.log("data",childData);
            console.log("user",user);
            //Why this.alloweduser get undefined inside this function?
            this.alloweduser.push(user);
        });
    });

有关 this 含义的更多信息，请参阅 How to access the correct `this` context inside a callback?

Typescript class 变量 return 在 Firebase 函数中未定义

Typescript class variable return undefined inside Firebase function

firebase

typescript

ionic2

angular

代码库