1
votes

Le tableau HTML ne se met pas à jour automatiquement après l'exécution de la publication HTTP

J'ai créé un site Web factice pour une «bibliothèque de jeux» juste pour m'apprendre les méthodes http POST, GET, PUT et DELETE, j'ai un fichier séparé pour mon API avec 3 «jeux». Le message fonctionne quand je entrez un nouveau nom de jeu et cliquez sur entrer rien ne se passe mais lorsque j'actualise la page, mon tableau html affiche les trois premiers jeux plus celui que je viens de publier. Je voudrais l'avoir posté puis l'afficher sur le tableau tout de suite plutôt que d'avoir à actualiser la page car c'est un peu bâclé à mon avis.

J'ai essayé de mettre la zone de saisie au-dessus du tableau, mais je ne le fais pas vraiment savoir quoi essayer.

public games: any = [];
     private url = 'http://localhost:3000/api/games';


 constructor(private httpClient: HttpClient){
     httpClient.get(this.url).subscribe(response => {
     this.games = response;
     });
 }

createGame(name: HTMLInputElement) {
    let post = {name :  name.value};
    name.value = '';
    let headers = new HttpHeaders();
    headers= headers.set('Content-Type', 'application/json');

    this.httpClient.post(this.url, {id: this.games.length + 1,name: post.name }, {headers})
    .subscribe(response => {
         console.log(response)

    })

}

  <h3>Here is your list of current games in your library</h3>
<table>
  <tr>
    <th>Id</th>
   <th>Name</th>
 </tr>
 <tr *ngFor="let game of games">
   <td>{{game.id}}</td>
   <td>{{game.name}}</td>
 </tr>
</table>

Je voudrais que le tableau se mette à jour automatiquement lorsque je y publier un nouveau jeu.

angular html api post

0 commentaires

4 Réponses :

0
votes

Vous devez ajouter un jeu nouvellement créé au tableau jeux dans la méthode createGame :

let editedGame = this.games.find(game => game.id === UserInputId);
editedGame.name = UserInputName;

Pour PUT code > méthode dont vous avez besoin pour trouver l'élément modifié dans le tableau, puis modifier ses données:

this.games.push({id: this.games.length + 1,name: post.name });

3 commentaires

merci beaucoup qui a résolu le problème, comment pourrais-je résoudre le même problème sans une demande de mise.

mettre est pour le jeu d'édition? Pourriez-vous publier votre méthode edit ?

let PutURL = ' localhost: 3000 / api / games ' + UserInputId; let headers = new HttpHeaders (); headers = headers.set ('Content-Type', 'application / json'); let game = {id: UserInputId, name: UserInputName} this.httpClient.put (PutURL, game, {headers}) .subscribe (response => {console.log (response);})

1
votes

Vous ne récupérez pas les données modifiées. Une fois l'appel POST réussi, effectuez un appel GET pour obtenir les données mises à jour.

createGame(name: HTMLInputElement) {
    let post = {name :  name.value};
    name.value = '';
    let headers = new HttpHeaders();
    headers= headers.set('Content-Type', 'application/json');

    this.httpClient.post(this.url, {id: this.games.length + 1,name: post.name },{headers}).subscribe(response => {
         console.log(response)
         // Subscribe back the changes
         this.httpClient.get(this.url).subscribe(response => {
             this.games = response;
         });
    })

}

Une autre méthode consiste à écrire une autre fonction qui utilise l'appel GET pour mettre à jour les données. Vous pouvez l'utiliser pour le chargement initial des données ainsi que pour la mise à jour après la création d'un nouveau jeu.

0 commentaires

1
votes

Vous devez implémenter OnInit sur votre composant, voir la doc ici [ https: // angular .io / api / core / OnInit]

Votre demande d'obtention devrait être dans le ngOnInit () comme ceci:

ngOnInit(){
  httpClient.get(this.url).subscribe(response => {
     this.games = response;
     });
}

Après avoir créé vos nouvelles données, appeler la fonction ngOnInit () et votre table sera mise à jour.

5 commentaires

@porgo Je le fais tout le temps pour recharger mes données, je n'ai jamais eu de problème avec mais ce n'est peut-être pas la meilleure façon

@porgo C'est exact. ngOnInit () n'est utilisé qu'à des fins d'initialisation et d'actualisation des composants. Essayez de ne pas l'utiliser pour les appels suivants.

@ ThéoMoulart Ce n'est pas une bonne pratique. Cela n'aura pas d'importance dans une application à petite échelle. Mais échoue à de nombreuses fonctionnalités fonctionnelles.

@ ThéoMoulart peut-être que vous n'avez pas encore eu de problèmes. Mais ngOnInit est pour l'initialisation des composants comme le dit @Arcteezy. Vous pouvez y faire plus d'actions que d'obtenir uniquement des données du backend. Et cela peut créer des problèmes pour des applications plus importantes.

Ok merci pour tes conseils, je ne ferai plus ça

1
votes

@sammyleighg essayez comme ceci,

vous pouvez mettre à jour votre liste de jeux une fois que vous avez réussi à publier vos données, faites simplement un autre appel http à votre serveur.

créez une méthode pour simplifier la logique.

/p>

public games: any = [];
private url = 'http://localhost:3000/api/games';


 constructor(private httpClient: HttpClient){
   this.getGamesInfo();
 }

 getGamesInfo() {
  this.httpClient.get(this.url).subscribe(response => {
     this.games = response;
   });
 }

createGame(name: HTMLInputElement) {
    let post = {name :  name.value};
    name.value = '';
    let headers = new HttpHeaders();
    headers= headers.set('Content-Type', 'application/json');

    this.httpClient.post(this.url, {id: this.games.length + 1,name: post.name }, {headers})
    .subscribe((response: any) => {
         if(response.status == 200) {
            this.getGamesInfo();
         }

    })

}

Je recommanderai d'utiliser ngOnInit () pour effectuer des appels Api plutôt que dans constructor ()

0 commentaires