Навигация по маршрутизатору приводит к исчезновению информации

Итак, у меня есть <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
      }
    ]
 }

Вопросы:

Почему возникает эта ошибка?!

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