маршрутизатор перемещается, вызывая исчезновение информации

Итак, у меня есть <p-table> на странице, где отображаются «пользователи», их полные имена, статусы и кнопки для изменения статусов.

У меня есть три кнопки: «Принять», «Отклонить» и «Неоднозначно». Каждая из этих кнопок имеет функции, которые выглядят так:

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

    data.status = UserStatusEnum.Accept;

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

При нажатии на строку отображается информация о соответствующем пользователе (она отображается на той же странице на другой стороне таблицы), и для этого я использую router.navigate() (маршрутизатор вводится).

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

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

    this.router.navigate(url);
}

Проблема:

Когда я изменяю статус моего пользователя, могут произойти две вещи.

1. Все будет так, как запланировано.
2. Все будет так, как запланировано, но вся информация о пользователе исчезнет визуально.

Когда появляется второй вариант, это то, где все становится размытым для меня:

• Если я затем выберу другого пользователя, последний выбранный будет отображен , и я получу ошибку:

• То же самое происходит, когда я просто выбираю , затем отменяю выбор строки и после этого выбираю строку прочее .

Я не знаю, что происходит, в некоторых других ответах говорилось, что что-то не так с маршрутизацией, но я думаю, что в моем случае это нормально:

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

Вопросов:

Почему происходит эта ошибка?!

Что я могу сделать?!