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
CodePudding user response:
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.
CodePudding user response:
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 .