Angular n'affiche pas la liste de mes instances d'objets

Bonjour à tous ,

je monte une petite application avec spring boot et angular 10 et je rencontre un probleme depuis quelque jours maintenant.
en faite je consomme mes web services avec angular notamment le web service qui liste tous mes carres:

Code:

---

1 2 3

getAllCarre():Observable<any>{ return this.httpClient.get('api/carre'); }

---

voila le code dans mon list-carre.component.ts:

Code:

---

1 2 3 4 5 6 7 8 9 10

getData():void{ this.serviceCarre.getAllCarre().subscribe( data=>{ this.listData=data; console.log(data); }, error=>{ console.log(error); }); }

---

où listData est de type any.
mon code html:

Code:

---

1 2 3 4 5 6 7 8 9

<tbody> <tr *ngFor ="let item of listData | async"> <th>{{item.idCar}}</th> <td>{{item.libCar}}</td> <td>{{item.typeCar}}</td> <td><button class="btn btn-warning" style="margin-left:20px;"(click)="selectedData(item)"><i class="fa fa-pencil-square-o"></i></button></td> <td><button class="btn btn-danger" (click)="removeData(item.idCar)"><i class="fa fa-trash-o"></i></button></td> </tr> </tbody>

---

le tableau ne s'affiche pas alors que dans la console du navigateur je peux voir mes données
capture:Pièce jointe 589169
lorsque je teste ce web service avec postman je reçois bien ma liste.
capture :
Pièce jointe 589170

votre aide me sera grandement utile et merci d'avance:zoubi:
nb: je suis nouveau sous angular

bienvenu sur Angular !

utilise les balises code du forum.

enlève le async !
le async auto souscrit à l'observable mais comme tu l'a déjà fait !


de plus, comme tu souscris listdata sera rempli au bout de quelques millisecondes plus tard
mais avant ces millisecondes il va eesayer d'afficher item et il va dire que les données sont undefined, normal.
donc il faut mettre un : ? par exemple: item?.idCar pour lui dire ne panique pas si tu n'as rien de suite

Code:

---

1 2 3 4 5 6 7 8 9 10

<tbody> <tr *ngFor ="let item of listData"> <th>{{item?.idCar}}</th> <td>{{item?.libCar}}</td> <td>{{item?.typeCar}}</td> <td><button class="btn btn-warning" style="margin-left:20px;"(click)="selectedData(item)"><i class="fa fa-pencil-square-o"></i></button></td> <td><button class="btn btn-danger" (click)="removeData(item?.idCar)"><i class="fa fa-trash-o"></i></button></td> </tr> </tbody>

---

pour éviter les ? tu peux utiliser cette autre technique

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<ng-container *ngIf="item">   <tbody> <tr *ngFor ="let item of listData"> <th>{{item.idCar}}</th> <td>{{item.libCar}}</td> <td>{{item.typeCar}}</td> <td><button class="btn btn-warning" style="margin-left:20px;"(click)="selectedData(item)"><i class="fa fa-pencil-square-o"></i></button></td> <td><button class="btn btn-danger" (click)="removeData(item.idCar)"><i class="fa fa-trash-o"></i></button></td> </tr> </tbody>   </ng-container>

---

merci krakatoa pour les precieuses explications:)
mais lorsque j'applique les deux techniques, aucune ne fonction

tu as un autre problème alors !
je viens de voir que ta requete retourne un code http : 302 (considéré comme une erreur par le navigateur)

donc à mon avis il va ici:

Code:

---

1 2 3 4 5 6 7 8 9

this.serviceCarre.getAllCarre().subscribe( data=>{ this.listData=data; // au lieu d'etre là console.log(data); }, error=>{ console.log(error); // avec le code 302 il est ICI ! });

---

ça donne quoi ça ?

Code:

---

1 2	{{listData| json}}

---

petite erreur sur la 2eme technique

correction:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<ng-container *ngIf="listData"> <tbody> <tr *ngFor ="let item of listData"> <th>{{item.idCar}}</th> <td>{{item.libCar}}</td> <td>{{item.typeCar}}</td> <td><button class="btn btn-warning" style="margin-left:20px;"(click)="selectedData(item)"><i class="fa fa-pencil-square-o"></i></button></td> <td><button class="btn btn-danger" (click)="removeData(item.idCar)"><i class="fa fa-trash-o"></i></button></td> </tr> </tbody> </ng-container>

---

bonsoir dukoid dukoid.
je viens de tester mais ça ne fonctionne tjrs pas même le {{listData| json}}

Code:

---

1 2 3 4 5 6 7 8

this.serviceCarre.getAllCarre().subscribe( data=>{ this.listData=data; // au lieu d'etre là console.log(data); }, error=>{ console.log(error); // avec l'erreur 302 il est ICI ! });

---

je l'ai aussi constaté mais je ne sais pas pourquoi.
et le statut 302 est celui que je retourne coté backend

faut voir avec le backend, il doit retourner un code 200 normalement

un url de test: https://jsonplaceholder.typicode.com/todos
teste avec cette url et tu verras que le backend renvoi un code 200

listData avec les données de : https://jsonplaceholder.typicode.com/todos

Code:

---

1 2 3 4 5 6 7 8 9 10

<ng-container *ngIf="listData">   <tbody> <tr *ngFor ="let item of listData"> <td>{{item |json}}</td> </tr> </tbody>   </ng-container>

---

le problème etais effectivement au niveau du backend
retournais un status http 302 au lieu de 200.
merci beaucoup les pro pour votre aide :)