집합 외부에서 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); 
    }); 
} 

이것은 또한 블로그 제목이 인쇄됩니다 장점이 있습니다 경우 중포 기지 실시간 데이터베이스의 스테이플 중 하나 인 블로그 제목 변경.