Bonjour,

Je débute en angular (version 16).

Je souhaite accéder à un service web sur un back Spring, de ce côté ça marche.
J'ai du JSON quand j'appelle l'url depuis un navigateur

J'ai tout générer avec la cli et les éléments sont biens dans le fichier "app.module.ts"

Le composant ne s'affiche pas.
Le problème est qu'il n'y a pas de message, d'erreur.
J'ai du mal à trouver l'erreur même dans la console de la ligne de commandes.

Si vous pouvez m'orienter SVP.

Cordialement

Voici le code

Mon model
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
export class Journal {
 
  constructor(public code: string,
              public libelle : String) {}
 
}
Mon service

J'ai tenté deux approches, qu'est ce qui est le plus simple pour le composant ? any ou le type objet ou le type du model ?
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
33
34
35
36
37
38
39
40
import { Injectable } from '@angular/core';*
import { HttpClient, HttpHeaders } from '@angular/common/http';*
import { Observable } from 'rxjs';*
import { classe } from '../models/Classe.model';
import { Journal } from '../models/Journal.model';
 
@Injectable({
providedIn: 'root'
})
 
export class JournalService {
    * constructor(private http: HttpClient) {}*
 
         getAll(): Observable<any> {*
        let url : string = 'http://localhost:8080/journal/getAll';
 
              * * *let observable: Observable<any> =*
              * * * * *this.http.get(url); *
 
  * * return observable;*
  * }*
 
 
  getAll2(): Observable<Journal[]>{
        let headers = new HttpHeaders();
      headers.append('content-type', 'application/json');
        headers.append('accept', 'application/json');
 
        return this.http.get<Journal[]>('http://localhost:8080/journal/getAll', {headers: headers});
    }
	/*
    
        journaux = [
        {code : "code", libelle : "libelle"},
        {code : "ac", libelle : "Achats"},
        {code : "ve", libelle :"ventes"}
        ];
    }
    */
}
le code TSdu composant
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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 { Injectable } from '@angular/core';*
import { HttpClient, HttpHeaders } from '@angular/common/http';*
import { Observable } from 'rxjs';*
import { classe } from '../models/Classe.model';
import { Journal } from '../models/Journal.model';
 
@Injectable({
providedIn: 'root'
})
 
export class JournalService {
    * constructor(private http: HttpClient) {}*
 
         getAll(): Observable<any> {*
        let url : string = 'http://localhost:8080/journal/getAll';
 
              * * *let observable: Observable<any> =*
              * * * * *this.http.get(url); *
 
  * * return observable;*
  * }*
 
 
  getAll2(): Observable<Journal[]>{
        let headers = new HttpHeaders();
      headers.append('content-type', 'application/json');
        headers.append('accept', 'application/json');
 
        return this.http.get<Journal[]>('http://localhost:8080/journal/getAll', {headers: headers});
    }
}
Le template html du composant
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
<ul>
<li *ngFor="let journal of journaux">
    {{journal.code}}
        {{journal.libelle}}
</li>
</ul>