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
Mon service
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) {} }
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 ?
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
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 template html du 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}); } }
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>
Partager