typescript - Angular 2 recargar datos en Post

Quiero actualizar mi arreglo de datos desde el servidor después de que un usuario envíe un formulario reactivo y yo haga un post al servidor usando una API.

He visto dos métodos para lograr esto.

Método 1 - Intervalo de actualización.

componente.aplicación

ngOnInit(): void {
    this.getAllProjects();
    this.interval = setInterval(() => {
        this.getAllProjects();
    }, 3000);
}

getAllProjects() {
    this.dataService.getProjects().subscribe(
        data => { this.pages = data },
        err => console.error(err),
        () => console.log(this.pages)
    );
}

onSubmitProject() {
    this.newProject.CourseId = this.addProjectForm.value.CourseId;
    this.newProject.TypeId = this.addProjectForm.value.TypeId;
    this.newProject.SignOff = this.addProjectForm.value.SignOff;
    this.newProject.StartDateTime = this.addProjectForm.value.StartDateTime;

    this.dataService.storePage(this.newProject)
        .subscribe(
            (response) => console.log(response),
            (error) => console.log(error)
        );
}

dataService.ts

getProjects() {
    return this.http.get("/api/project/getallprojects");
}

storePage(project: Project) {
    return this.http.post('/api/Project/postproject', project);
}

Esto funciona funcionalmente para mí, sin embargo, no necesito actualizar cada x segundos. Esto parece ineficiente para mis necesidades.

Método 2 - usar algo como:

this.projects.push(project);

Esto no funciona para mí porque los datos necesitan incluir el id asignado a cada objeto, que es asignado por la base de datos. Por lo tanto, necesito hacer una llamada al servidor y volver a obtener los datos.

Aunque el método 1 funciona en términos de funcionalidad, lo siguiente (this.getAllProjects()) no lo hace:

onSubmitProject() {
    this.newProject.CourseId = this.addProjectForm.value.CourseId;
    this.newProject.TypeId = this.addProjectForm.value.TypeId;
    this.newProject.SignOff = this.addProjectForm.value.SignOff;
    this.newProject.StartDateTime = this.addProjectForm.value.StartDateTime;

    this.dataService.storePage(this.newProject)
        .subscribe(
            (response) => console.log(response),
            (error) => console.log(error)
        );
    this.getAllProjects();
    console.log(this.pages);
}

Si elimino el intervalo de actualización del método 1 y agrego this.getAllProjects(); y console.log() al método submit, los datos no se actualizan. El registro en la consola muestra los mismos datos, sin embargo, si actualizo la página manualmente, obtengo los datos.

¿Cuál es la manera correcta/mejor de actualizar los datos de la llamada API GET después de un POST?

Respuesta #1

Por lo que has escrito, tu método getAllProjects se llama antes de completar storePage, ya que estas llamadas son de naturaleza asincrónica, tienes que llamar a getAllProjects una vez que tu storePage esté completo, lo cual es dentro de su subscribe.

onSubmitProject() {
    this.newProject.CourseId = this.addProjectForm.value.CourseId;
    this.newProject.TypeId = this.addProjectForm.value.TypeId;
    this.newProject.SignOff = this.addProjectForm.value.SignOff;
    this.newProject.StartDateTime = this.addProjectForm.value.StartDateTime;

    this.dataService.storePage(this.newProject)
        .subscribe(response => {
                console.log(response);
                this.getAllProjects();
                }
        );        
    console.log(this.pages);
}