Question

在我的项目中，我使用Observables来保存从DB获取的数据。所以我在我的主要组件中订阅了它。

在search.service中，数据检索功能

  getData(){
    return new Observable(subscriber => {
      this.db.find({}, function(err, docs) {
        if (err) subscriber.error(err);
        subscriber.next(docs);
      });
    })
  }

在主要组件中

  getData(){
    this.searchService.getData().subscribe(
      data => {
        this.datum = data;
        console.log(this.datum)},
      err => console.log("E", err)
    );
    console.log(this.datum);
  }

  ngOnInit(){
    this.getData();
  }

以下是我在控制台中获得的结果

据我所知，虽然在.subscribe()方法的上下文中，属性datum被赋予了数据库的内容，但在它之外，它仍然是未定义的。我不明白为什么会这样，或者如何显示数据库的内容。我发现的所有教程都表明，在我订阅了observable并在订阅方法中协助我的组件的属性以可观察的方式传递后，一切都应该保持这种状态，我应该能够在组件中轻松地显示它

一直抨击我的头一个月左右，并且对于可观察物品的文章没有运气。似乎我得到了原则，但无论如何，都无法使用它们。

任何提示都将不胜感激。

（我不想诉诸使用承诺，因为可观察性似乎在其适用性方面更为一般，似乎学习它们是非常有效的技能）

修改

组件的html模板。

＆＃13;

<!--The whole content below can be removed with the new code.-->
<div style="text-align:center">
  <h1>
    Welcome to {{title}}!!
    Data: {{datum}}
  </h1>

＆＃13;

编辑2

查看

Answer 1

[按照评论中的数字;它们代表执行顺序]

getData(){
    this.searchService.getData()
        .subscribe( //1. subscrube just registers what will happen when data comes and immediately goes to next call
            this.successHandle.bind(this),//3. this will run only when data comes which might be a year from subscription
            err => console.log("E", err)
        );
    console.log(this.datum); //2. runs immediately after subscribe
  }

successHandle(data){
    this.datum = data;
    console.log(this.datum) //4. logs data when it comes
}

你的第2行。记录'undefined'，因为此时还没有数据。您刚订阅，但数据将来会出现

Answer 2

在这里，您正在进行异步调用，并且在您从DB中获取数据时，您的订阅外部的console.log(this.datum);将运行，完成后，您的订阅中的console.log(this.datum)将会运行。这是Observables和callBacks的整个故事..

来自可观察数据不显示

2 个答案: