Mes données ne s'affichent pas correctement

Bonjour,
J'ai crée une page affichant les valeurs contenu dans ma BDD, ainsi qu'un input et un bouton pour rajouter une donnée.
Afin de faire les choses proprement, j'ai souhaité créer un service pour la lecture et l'écriture en base, afin de gérer les requêtes http vers mon contrôleur.

Le problème est que lorsque j'affiche mon component, l'affichage des données ne se fait pas correctement lorsque je passe par mon service. Je suis en effet obligé d'aller sur une autre page et revenir pour que les données s'affichent.
Cependant celà s'affiche parfaitement lorsque je copie le contenu de la méthode de mon service directement dans le component.
Pourriez vous m'indiquer pourquoi ?

Merci de votre aide.

Ci dessous mon code Html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<h1> data to display : </h1>
 
<p *ngIf="!data"><em>Loading...</em></p>
<table class='table' *ngIf="data">
  <thead>
    <tr>
      <th>Id</th>
      <th>Nom</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let dataToDisplay of data">
      <td>{{ dataToDisplay.id }}</td>
      <td>{{ dataToDisplay.nom }}</td>
    </tr>
  </tbody>
</table>
 
<h1>add Data : </h1>
<form (ngSubmit)="onSubmit(f)" #f="ngForm">
  <label for="name">Name</label>
  <input class="form-control" type="text" name="name" ngModel>
  <button class="btn btn-primary" type="submit" [disabled]="f.invalid">Enregistrer</button>
</form>

Le fichier .ts du component :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import { Component } from '@angular/core';
import { ValuesService } from '../Services/values.service';
import { Person } from '../models/values-interface';
import { NgForm } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
 
 
@Component({
    selector: 'app-test',
    templateUrl: './test.component.html',
    styleUrls: ['./test.component.css']
})
/** test component*/
export class TestComponent {
  /** test ctor */
  public data: any;
  public baseUrl: string = 'https://localhost:44343';
 
  constructor(private monService: ValuesService, private http: HttpClient) { }
  ngOnInit() {
    //this.http.get(this.baseUrl + '/api/values').subscribe(result => this.data = result);
    this.data = this.monService.getData();
  }
 
  onSubmit(form: NgForm) {
    const name = form.value['name'];
    this.monService.postData(name);
    this.data = this.monService.getData();
    //this.http.get(this.baseUrl + '/api/values').subscribe(result => this.data = result);
  }
}

Et le code de mon service :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
 
const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json'
  })
};
 
export interface Person {
  nom: string;
}
 
@Injectable()
export class ValuesService {
  values: any;
  public baseUrl: string = 'https://localhost:44343';
 
  constructor(private http: HttpClient) { }
 
  postData(data: string): Observable<any> {
    var formated_data: Person = { nom: data };
    this.http.post(this.baseUrl + '/api/values', formated_data).subscribe(result => this.values = result);
    return this.values;  
  }
 
  getData(): Observable<any> {
    this.http.get(this.baseUrl + '/api/values').subscribe(result => this.values = result);
    return this.values;  
  } 
}