Javascript Angular 2 w/TypeScript Firebase API返回服务中但组件中未定义的对象数组

我正在尝试在Angular 2应用程序中使用Firebase API

以下是我的服务：

fbGetData() {
        firebase.database().ref('/path/to/data').on('value',(snapshot) => {
            this.data = snapshot.val();
            console.log(this.data); //This logs my data
            return this.data;
        })
    }

这是我的组件中的内容：

ngOnInit() {
        this.data = this.dataService.fbGetData();
        console.log(this.data); //This logs undefined
    }

---

组件记录未定义的对象，然后服务记录对象数组。提前感谢您的帮助。

正如@jornsharpe评论的那样：Firebase从其异步服务器检索数据。您的浏览器不会等待此结果，因为这会阻止用户执行其他操作。因此，您无法从

fbGetData

返回数据，因为它尚未加载

使用异步加载有两种方法：

使用回调

还愿

使用回调 异步加载的诀窍是将您的解决方案从“先获取数据，然后打印”重新构造为“无论何时加载数据，都要打印”

在代码中，这转换为：

fbGetData() {
    firebase.database().ref('/path/to/data').on('value',(snapshot) => {
        this.data = snapshot.val();
        console.log(this.data);
    })
}

fbGetData();

因此，日志记录现在完全在

on（）

回调中

当然，您可能希望在不同的时间对数据执行不同的操作，因此可以将回调传递到

fbGetData（）

：

当然，在这个阶段，你应该考虑如果你不应该简单地用快照调用你自己的回调：

fbGetData(callback) {
    firebase.database().ref('/path/to/data').on('value',callback);
}

fbGetData(data => console.log(data.val()));

还愿 在上面的示例中，当数据最初从服务器加载时以及服务器上的数据发生更改时，将打印数据。这是Firebase数据库魔力的一部分：它同步当前值和对该值的任何更改

如果只关心当前值，还可以使用

once（）

。此方法可以接受回调，但也可以返回承诺。这意味着您可以从

fbGetData

返回一些内容：

fbGetData(callback) {
    firebase.database().ref('/path/to/data').on('value',(snapshot) => {
        this.data = snapshot.val();
        callback(this.data);
    })
}

fbGetData(data => console.log(data));

fbGetData() {
    var promise = firebase.database().ref('/path/to/data').once('value');
    return promise;
}

fbGetData().then(snapshot => console.log(snapshot.cal());

---

由于使用的是

once（）

，因此此代码段中的值最多只能打印一次

正如@jornsharpe评论的那样：Firebase从其异步服务器检索数据。您的浏览器不会等待此结果，因为这会阻止用户执行其他操作。因此，您无法从

fbGetData

返回数据，因为它尚未加载

使用异步加载有两种方法：

使用回调

还愿

使用回调 异步加载的诀窍是将您的解决方案从“先获取数据，然后打印”重新构造为“无论何时加载数据，都要打印”

在代码中，这转换为：

fbGetData() {
    firebase.database().ref('/path/to/data').on('value',(snapshot) => {
        this.data = snapshot.val();
        console.log(this.data);
    })
}

fbGetData();

因此，日志记录现在完全在

on（）

回调中

当然，您可能希望在不同的时间对数据执行不同的操作，因此可以将回调传递到

fbGetData（）

：

当然，在这个阶段，你应该考虑如果你不应该简单地用快照调用你自己的回调：

fbGetData(callback) {
    firebase.database().ref('/path/to/data').on('value',callback);
}

fbGetData(data => console.log(data.val()));

还愿 在上面的示例中，当数据最初从服务器加载时以及服务器上的数据发生更改时，将打印数据。这是Firebase数据库魔力的一部分：它同步当前值和对该值的任何更改

如果只关心当前值，还可以使用

once（）

。此方法可以接受回调，但也可以返回承诺。这意味着您可以从

fbGetData

返回一些内容：

fbGetData(callback) {
    firebase.database().ref('/path/to/data').on('value',(snapshot) => {
        this.data = snapshot.val();
        callback(this.data);
    })
}

fbGetData(data => console.log(data));

fbGetData() {
    var promise = firebase.database().ref('/path/to/data').once('value');
    return promise;
}

fbGetData().then(snapshot => console.log(snapshot.cal());

---

由于使用的是

once（）

，因此此代码段中的值最多只能打印一次

您可以尝试使用subscribe方法获取数据。可以订阅、映射和转换为JSON

看一下代码，看看你是否能得到一些东西

public sessions(): any {
    return this.http.get('api/ResultsAPI')         //.get('api/vehicles.json')
        .map(
        (response: Response) => <any>response.json())
        .do
        (
        response => response
        );
}

---

您可以尝试subscribe方法来获取数据。可以订阅、映射和转换为JSON

看一下代码，看看你是否能得到一些东西

public sessions(): any {
    return this.http.get('api/ResultsAPI')         //.get('api/vehicles.json')
        .map(
        (response: Response) => <any>response.json())
        .do
        (
        response => response
        );
}

---

fbGetData

是异步的，它不返回数据。

fbGetData

是异步的，它不返回数据。我知道我现在哪里出错了。非常感谢您抽出时间帮助我了解我现在的错误所在。非常感谢你抽出时间来帮忙