Angular api response data not displaying in template

Question

I fetch categories from the backend and display them in a table.

The problem is my code is not displaying any data in the table.

The getFournisseurs method successfully gets 5 items from the back end. Why is this not visible to the template?

model Fournisseur

export class Fournisseur {
IdFour ?: number ;
NomFour ?: string ;
AdresseFour ?: string ;
Email ?: string ;
TelFour ?: number ;

}

FournisseurService

export class FournisseurServiceService {


  constructor(private http: HttpClient) { }



  public GetFournisseur():Observable<Fournisseur[]>{
  return this.http.get<Fournisseur[]>('http://localhost:8081/Fournisseur/getAll')}

appComponent.ts

export class AppComponent implements OnInit{
  ngOnInit(): void {this.GetFournisseurs(); }
  public Fournisseurs !: Fournisseur[];

  constructor(private fournisseurService: FournisseurServiceService) { }

  public GetFournisseurs(): void{
    this.fournisseurService.GetFournisseur().subscribe(
      (response: Fournisseur[])=>{this.Fournisseurs = response;},
       (error:HttpErrorResponse)=>{alert(error.message);},
    )
  }

appComponent.html

<p>Hello angular !!!</p>
<hr>
<div *ngFor="let fournisseur of Fournisseurs">
  <li><p>{{fournisseur.Email}}</p></li>
</div>

output there is 5 rows in fournisseur table

i want to display the data from table fournisseur in template

Answer 1

Please make sure the ChangeDetectionStrategy is default.

@Component({
    selector: 'your-component',
    templateUrl: './your-component.component.html',
    styleUrls: ['./your-component.component.scss'],
    changeDetection: ChangeDetectionStrategy.Default
})

If this couldn't solve your issue, please share the api response object.

Answer 2

Thanks everybody, i found the answer of my problem. in the class fournisseur in backend i have those attributes:

 private Long IdFour ;
 private String NomFour  ;
 private String AdresseFour ;
 private String Email  ;
 private int TelFour  ;

and in Model Fourniiseur in Front-end

  export class Fournisseur {
    IdFour ?: number ;
    NomFour ?: string ;
    AdresseFour ?: string ;
    Email ?: string ;
    TelFour ?: number ;

}

So i changed the first letter of every attribute in Frontend to miniscule and it works.