セットの外でfirebaseObjectObservableにアクセスできない

Question

まず、これはAngular2アプリです。私はAngular2とFirebaseを使ってビルドを始めています。 AngularFire2も使用しています。購読した直後にblog.titleを印刷することができるので、私のサービスが機能していることが分かります。しかし、それが私が結果にアクセスできる唯一の場所です。それ以外のところはundefinedエラーです。 {{}}やクラス内のテンプレートで使用しても、同じ結果が得られます。私は何が間違っているのか分かりません。私は観察可能なものも新しいです。

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 
    } 

} 

BlogService

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"); 
} 

これを実行すると、ログは次のようになります。

をサブスクライブする前に、

サブスクライブ後

コールバック

これはおそらく当然期待している順序ではありません。しかし、それは文書化された動作です：データはリモートサーバからロードされているので、あなたに連絡するまでには時間がかかるかもしれません。ロードされている間に、subscribeコールの後のコードが続行されます。

私の問題を再構成することで、これを最も簡単に行うことができます。通常は、「まずブログ投稿を取得してから、タイトルを印刷します」と言うでしょう。しかし、今では、 "ブログ投稿を取得し始める、それを取得すると、タイトルを印刷する"にそれを再構築します。

コードでは、最初のロギングステートメントのように、ににコールバックを設定することを意味します。だから、：

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リアルタイムデータベースのステープルの一つであるかのブログのタイトル変更を、印刷されるという利点を有します。