페이지가 새로 고침 될 때까지 각도가 생성 된 개체를 표시하지 않습니다.

Question

도와주세요. 데이터베이스에서 메시지를 가져 와서 사용자 프로필 페이지에 표시하는 메시지 서비스가 있습니다. 메시지를 작성하거나 삭제할 때 브라우저를 새로 고칠 때만 변경 사항을 볼 수 있습니다.

ID를 기준으로 정렬하기 위해 필터를 적용하기 전에 페이지가 동적으로 업데이트됩니다. 필터가 내 메시지 배열을 바인딩 해제하는 이유는 무엇입니까?

프로필 구성 요소 :

export class ProfileComponent implements OnInit { 

    user: User; 
    userId: any; 
    messages: any; 

    constructor(private authService: AuthService, private messageService: MessageService) {} 

    ngOnInit() { 
     this.authService.getUser().subscribe(
     (user: User) => { 
     this.user = user; 
     this.userId = user.userId; 
     } 
    ); 
     this.messageService.getMessages() 
     .subscribe(
      (messages: Message[]) => { 
      this.messages = messages.filter(x => x.userId == this.userId); 
      //this.messages = messages; //this works perfect, but shows all users messages 
      } 
    ); 
    } 
} 

Answer 1

이 1 API 호출처럼 보인다 (getUser 방법은) 더 많은 시간이 걸립니다, 그것은 getMessages 방법 후 완료지고 있습니다. 어떻게 든 그들을 종속시켜야합니다. getUsertoPromise 메서드를 사용하여 약속을 준수하도록 변환 할 수 있습니다. 이것에

ngOnInit() { 
    this.authService.getUser() 
    .toPromise() 
    .then(
    (user: User) => { 
     this.user = user; 
     this.userId = user.userId; 
    } 
) 
    .then(() => { 
     this.messageService.getMessages() 
     .subscribe(
     (messages: Message[]) => { 
      this.messages = messages.filter(x => x.userId == this.userId); 
     } 
    ); 
    }); 
} 

Answer 2

변경 코드 : 첫 번째는 호출이 완료되면이 호출 할 수 있도록

messages: Array<any> = []; 
this.authService.getUser().subscribe(
     (user: User) => { 
     this.user = user; 
     this.userId = user.userId; 
     this.messageService.getMessages() 
       .subscribe(
        (messages: Message[]) => { 
        this.messages = messages.filter(x => x.userId === this.userId); 
        //this.messages = messages; //this works perfect, but shows all users messages 
        } 
      ); 
     } 
    ); 

당신은 그냥 둥지에 다른 관찰 가능한이 필요합니다.