无法在集合外访问 firebaseObjectObservable

Question

首先，这是一个 Angular2 应用程序。我刚刚开始使用 Angular2 和 Firebase 进行构建。我也在使用 AngularFire2。我知道我的服务正在运行，因为我可以在订阅后立即打印出 blog.title。但这是我唯一可以访问结果的地方。在其他任何地方都给我一个 undefined 错误。无论是在带有 {{}} 的模板中还是在 class 中使用它，我都会得到相同的结果。我不确定我做错了什么。我也是 observables 的新手。

export class BlogEditComponent implements OnInit {
  blogForm: FormGroup;
  blog$: FirebaseObjectObservable<Blog>;
  blog: Blog;

  constructor(private route: ActivatedRoute,
    private router: Router,
    private fb: FormBuilder,
    private blogService: BlogService) { }


  ngOnInit() {
    this.isNew = false;
    this.blog$ =   this.blogService.getBlogFromId(this.route.snapshot.params['id']);
    this.blog$.subscribe(snapshot =>{
      this.blog = snapshot;
      console.log(this.blog.title);  //prints out fine
    });
    console.log(this.blog.title); //throws error here
  }

}

博客服务

getBlogFromId(id: String): FirebaseObjectObservable<Blog> {
  return this.af.database.object('blogs/' + id);
}

Answer 1

这是预期的行为：回调运行的时间与其周围的代码不同。

最容易看到这一点，您忽略实际值并只记录一些静态字符串：

ngOnInit() {
  this.blog$ = this.blogService.getBlogFromId(this.route.snapshot.params['id']);
  console.log("before subscribing");
  this.blog$.subscribe(snapshot =>{
    console.log("in callback");
  });
  console.log("after subscribing");
}

当你运行这个时，记录将是：

before subscribing

after subscribing

in callback

这可能不是您自然期望的顺序。但这是记录在案的行为：由于数据是从远程服务器加载的，因此可能需要一些时间才能回复您。在加载时，subscribe 调用后的代码继续。

我经常发现通过重新定义我的问题最容易解决这个问题。通常你会说“先获取博客 post，然后打印标题”。但现在将其重新定义为“开始获取博客 post；获取后，打印标题”。

在代码中，这意味着您将所有需要标题 的代码模式化为 回调，就像您的第一个日志记录语句一样。所以：

ngOnInit() {
  this.isNew = false;
  this.blog$ = this.blogService.getBlogFromId(this.route.snapshot.params['id']);
  this.blog$.subscribe(snapshot =>{
    this.blog = snapshot;
    console.log(this.blog.title);
  });
}

这还有一个好处，即如果博客标题发生变化，将打印博客标题，这是 Firebase 实时数据库的主要功能之一。

无法在集合外访问 firebaseObjectObservable

Cannot access firebaseObjectObservable outside of set

firebase

typescript

firebase-realtime-database

angularfire2