Ayuda, tengo un servicio de mensajes que obtiene mis mensajes de la base de datos y los muestra en una página de perfil de usuario. Cuando creo o elimino un mensaje, solo puedo ver los cambios cuando actualizo el navegador.
La página se actualiza dinámicamente antes de aplicar un filtro para ordenar por Id. ¿Por qué el filtro desvincula mi conjunto de mensajes?
componente de perfil:
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 } ); } }Parece que su primera llamada API (método getUser ) está tomando más tiempo, está finalizando después del método getMessages . De alguna manera deberías hacerlos dependientes. Puede convertir getUser Observable en promesa usando el método toPromise .
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); } ); }); }Cambia tu código a este:
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 } ); } );Solo necesita anidar los otros observables, por lo que se llamará una vez que el primero termine de llamar.