Discussion :

[guillaume90]

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 :

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

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

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

Code :

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

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 html :

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

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:
lorsque je teste ce web service avec postman je reçois bien ma liste.
capture :


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

[krakatoa]

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 :

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

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 :

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

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>

[guillaume90]

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

[dukoid]

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 :

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

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 :

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

1
2
 
{{listData| json}}

petite erreur sur la 2eme technique

correction:

Code :

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

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>

[guillaume90]

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

Code :

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

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

[dukoid]

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 :

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

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>

[guillaume90]

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