Affichage des données venant d'un API

**sougrinoma** · 25/01/2021, 23h56

Bonjour tout le monde.
j'ai essayé de suivre un tutoriel pour afficher les données venant d'un api. le code ne signale aucune erreur mais aucune donnée ne s'affiche mais quand je teste avec postman tout se passe bien. j'aimerais savoir ou le problème pourrait se situer?

je vous mets le code:

voici le code html de la page la ou les données doivent s'afficher(le fichier s'appelle ecransaisie2-list.component.html):

Code html :

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
<button mat-raised-button (click)="onCreate()">
  <mat-icon>add</mat-icon>Nouveau 
</button>
<table class="table table-striped">
  <thead class="thead-dark">
    <tr>
      <th> Nom</th>
      <th> Prenom</th>
      <th> Fonction</th>
      <th> Sexe</th>
      <th> Adresse</th>
      <th> Telephone</th>
      <th> Date adhesion</th>
      <th> Date prise effet</th>
      <th> Date de fin</th>
      <th> Montant de la souscription</th>
      <th> Service souscrit</th>
    </tr>
  </thead> 
  <tbody>
    <tr *ngFor="let adherant of adherants">
      <td>{{adherant.nom_adherant}}</td>
      <td> {{adherant.prenom_adherant}}</td>
      <td> {{adherant.fonction_adherant}}</td>
      <td> {{adherant.sexe_adherant}}</td>
      <td> {{adherant.adresse_adherant}}</td>
      <td> {{adherant.telephone_adherant}}</td>
      <td> {{adherant.date_adhesion}}</td>
      <td> {{adherant.date_prise_effet}}</td>
      <td> {{adherant.date_fin}}</td>
      <td> {{adherant.montant_souscription}}</td>
      <td> {{adherant.service_souscrit}}</td> 
    </tr>
  </tbody>
</table>

le code du fichier ecransaisie2-list.component.ts:

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
41
42
43
44
45
46
47
48
import { Component, OnInit } from '@angular/core';
import {MatTableDataSource, MatTableModule} from '@angular/material/table';
import {EcransaisieService} from '../../shared/ecransaisie.service';
import {MatDialog,MatDialogConfig} from '@angular/material/dialog';
import { Ecransaisie1Component } from '../ecransaisie1.component';
import { Ecransaisie2Component } from '../ecransaisie2/ecransaisie2.component';
import {animate, state, style, transition, trigger} from '@angular/animations';
import { Adherant } from '../adherant';
import {AdherantService} from '../adherant.service';
 
 
 
@Component({
  selector: 'app-ecransaisie2-list',
  templateUrl: './ecransaisie2-list.component.html',
  styleUrls: ['./ecransaisie2-list.component.css']
})
 
 
export class Ecransaisie2ListComponent implements OnInit {
  adherants:Adherant[];
  constructor(private adherantService:AdherantService) { }
 
  ngOnInit(): void {
 
    this.getAdherants();
  }
  private getAdherants():void{
    this.adherantService.getAdherantList().subscribe(data=>{
      this.adherants=data;
 
    });
  }
 
  onCreate(){
    const dialogConfig=new MatDialogConfig();
    dialogConfig.disableClose=true;
    dialogConfig.autoFocus=true;
    dialogConfig.width="50%";
    //this.dialog.open(Ecransaisie2Component,dialogConfig);
  }
  public mask = {
    guide: true,
    showMask: true,
    mask: [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/]
  };
  //adherants: Adherent[];
}

le code du fichier adherant.service.ts:

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
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Adherant } from './adherant';
 
@Injectable({
  providedIn: 'root'
})
export class AdherantService {
  private baseURL="http://localhost:8080/api/v1/Adherent";
 
  constructor(private httpClient:HttpClient) { }
  getAdherantList():Observable<Adherant[]>{
    return this.httpClient.get<Adherant[]>(`${this.baseURL}`);
  } 
}

le code du fichier adherant.ts:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
export class Adherant {
    numero_adherant:number;
    nom_adherant:string;
    prenom_adherant:string;
    fonction_adherant:string;
    sexe_adherant:string
    adresse_adherant:string
    telephone_adherant:string
    date_adhesion:Date;
    date_prise_effet:Date;
    date_fin:Date;
    montant_souscription:number;
    service_souscrit:string;
}