title: angular not showing created object until I refresh page
body: <p>Please help, I have a message service that is fetching my messages from the database and displaying them on a user profile page. When I create or delete a message, I can only see the changes when I refresh the browser.</p>
  
  <p>The page updates dynamically before I apply a filter to sort by Id, why is the filter unbinding my array of messages?</p>
  
  <p>profile component:</p>
  
  <pre><code>    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) =&gt; {
          this.user = user;
          this.userId = user.userId;
          }
        );
         this.messageService.getMessages()
        .subscribe(
            (messages: Message[]) =&gt; {
              this.messages = messages.filter(x =&gt; x.userId == this.userId);
              //this.messages = messages; //this works perfect, but shows all users messages
            }
        );
      }
  }
  </code></pre>