While attempting to send and retrieve data for display, I encountered an issue where the component initializes before the new data is added to the server. This results in a missing element being displayed.
Is there a way to delay the initialization process, allowing for the post request to be made first, followed by the get request to ensure all elements are properly displayed?
create-organisme.component.ts:
import { Component, OnInit } from '@angular/core';
import { OrganismeService } from '../organisme.service';
import { Organisme } from '../organisme';
import { Router } from '@angular/router';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-create-organisme',
templateUrl: './create-organisme.component.html',
styleUrls: ['./create-organisme.component.css'],
providers: [OrganismeService]
})
export class CreateOrganismeComponent implements OnInit {
organisme: string;
description: string;
form = new FormGroup ({
nom: new FormControl(''),
description: new FormControl(''),
});
constructor(private orgService: OrganismeService, private router: Router) { }
ngOnInit() {
}
create(): void {
const org = new Organisme();
org.organisme = this.form.get('nom').value;
org.description = this.form.get('description').value;
this.orgService.create(org)
.subscribe(
(error) => {
console.log('Erreur: ' + error);
}
);
this.router.navigate(['/display']);
}
}
display-organisme.component.ts:
import { Component, OnInit } from '@angular/core';
import { Organisme } from '../organisme';
import { OrganismeService } from '../organisme.service';
@Component({
selector: 'app-display-organisme',
templateUrl: './display-organisme.component.html',
styleUrls: ['./display-organisme.component.css'],
providers: [OrganismeService]
})
export class DisplayOrganismeComponent implements OnInit {
organismes: Organisme[];
selectedOrganisme: Organisme;
constructor(private orgService: OrganismeService) { }
onSelect(organisme: Organisme): void {
this.selectedOrganisme = organisme;
}
ngOnInit() {
this.orgService.getOrganismes().subscribe(orgs => this.organismes = orgs);
}
}
Is it advisable to move the router navigation within the subscribe method so that it waits for the response before redirecting?