Angular 13 List binds when page is routed and not when reloaded

My scenario is that I have a page which calls component ViewprofileComponent.

export class ViewprofileComponent implements OnInit {
subscriptions: Subscription[] = [];
public usersX: any[];
 public async ngOnInit() {
  const us = this.userService.getUsers().subscribe(j => {
   this.userService.currentUsersValue.subscribe(j => {
     this.usersX = j;
     console.log(this.usersX);
   });
 });
 this.subscriptions.push(us);
}

Here is my HTML page.

<div *ngFor="let user of usersX">
    {{user.id}}
    {{user.userName}}
</div>

Now this this.usersX binds easily to show list when I try to access this page via routing using from menu but when I try to reload the component ViewprofileComponent page using F5 it gets the result in the console.log(this.usersX) but not show or bind the list on the HTML page.