При удалении проектов без обновления страницы идентификатор не определен.

Question

Это мой метод, при котором я пытаюсь удалить проект (индекс берется из ngFor в шаблоне):

onDeleteProject(index: number) {
    console.log(this.projects[index].id) // always output the id
    this.projectService.deleteProject(this.projects[index].id).subscribe();
    this.projects.splice(index, 1);
}

Вот как проект добавляется в базу данных:

public async myFunc(newProject: any): Promise<void> {
    const newProjectFromServer = await this.projectService.addProject(newProject).toPromise()

    await this.projectService
      .addEmployeesToProject(
        newProjectFromServer.id,
        newProject.assignedEmployees
       ).toPromise();

    console.log(newProjectFromServer.id); // always output the id
    this.afterSubmit();
}

Итак, как вы можете видеть, когда я пытаюсь удалить проект или отправить новый проект, у них всегда есть идентификатор. Но если я попытаюсь удалить только что созданный проект без обновления страницы или повторной инициализации компонента, идентификатор фактически не определен. Вот как я перехожу из новой формы проекта обратно к списку проектов:

afterSubmit() {
    this.formSubmitted = true;
    setTimeout(() => {
      this.onFormAlertClose();
    }, 1500);
}

onFormAlertClose() {
    this.router.navigate(["projects"]);
}

Только если я обновляю sh страницу, проекты имеют идентификатор, и поэтому запрос на удаление проходит. Итак, я получаю эту ошибку:

DELETE http://localhost:8080/api/projects/undefined 500
ERROR HttpErrorResponse {headers: HttpHeaders, status: 500, statusText: "OK", url: "http://localhost:8080/api/projects/undefined", ok: false, …}
error: {cause: {…}, message: "Failed to convert from type [java.lang.String] to …berFormatException: For input string: "undefined""}

Изменить: по запросу, вот как я добавляю проект после создания. В методе отправки:

this.projectService.addProjectToTable(newProject);

В projectService этот метод:

private addProjectToTable$: Subject<IProject> = new Subject<IProject>();

[...more code]

projectsTableChanged$ = this.addProjectToTable$.asObservable();

addProjectToTable(project: IProject) {
    this.addProjectToTable$.next(project);
}

И, наконец, компонент списка проектов, в котором находится таблица с ngFor, обновляется следующим образом:

addProjectAfterSubmit() {
   this.projectsTableChangedSubs =
       this.projectService.projectsTableChanged$.subscribe(
           (newProj) => {
               this.projects.push(newProj);
           }
       );
}