router navigate causing information to disappear

Question

So I have a <p-table> on a page, which displays "users", their full names, statuses and buttons to change statuses.

I have three buttons: "Accept", "Reject" and "Ambiguous". Each of these buttons have functions, which look like this:

onAcceptUser(user: UserModel) {
    const data = Utils.cloneObject(user, UserModel);

    data.status = UserStatusEnum.Accept;

    this.userService.userStatusUpdate(data).subscribe(c => {
      user.status = data.status
    });
}

When clicking a row, the information for the corresponding user is displayed(it's displayed on the same page on the other side of the table) and for this I use router.navigate()(router is injected).

onSelectUser(event) {
    const user = event.data.user;

    let url = ['user-reports/user-list', this.userListId, 'user', user.userId];

    this.router.navigate(url);
}

Problem:

When I change the status of my user two things might happen.

1. Everything will happen as planned.
2. Everything will happen as planned, but all the information about the user will disappear visually.

When the second option occurs, this is where things get blurry for me:

• If I then select the other user, the last selected one will be displayed and I get an error:

• Same thing happens when I just select, then deselect the row and after that I select the other row.

I don't know what is going on, some other answers said that something was wrong with routing, but I think in my case it is fine:

{
    path: 'user-list/:listid',
    component: ViewUserListComponent,
    children: [
      {
        path: 'user/:id',
        component: UserViewEditComponent
      }
    ]
 }

Questions:

Why is this error happening?!

What can I do?!

Answer 1

What fixed my problem you may ask ?!

I added the (onRowUnselect) event to the <p-table>, where I cleared the Url parameters and voilà.