Question

我为“游戏库”创建了一个虚拟网站，只是为了告诉自己HTTP POST，GET，PUT和DELETE方法，我为自己的api提供了一个单独的文件，其中包含3个“游戏”。输入新的游戏名称，然后单击输入，什么都不会发生，但是当我刷新页面时，我的html表会显示前三个游戏以及我刚刚发布的游戏。我希望将其发布，然后立即将其显示在桌子上，而不必刷新页面，因为它看起来有点草率。

我曾尝试将输入框放在桌子上方，但我真的不知道还能尝试什么。

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

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)

    })

}

我希望在向其发布新游戏时自动更新该表。

Answer 1

您必须在games方法内的createGame数组中添加新创建的游戏：

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

对于PUT方法，您需要在数组中找到已编辑的项目，然后更改其数据：

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

Answer 2

您没有在找回更改的数据。 POST 调用成功后，请进行 GET 调用以获取更新的数据。

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;
         });
    })

}

另一种方法是编写另一个函数，该函数使用 GET 调用来更新数据。您可以使用它来初始加载数据以及在创建新游戏后进行更新。

Answer 3

您必须在组件上实现OnInit，请在此处查看文档[https://angular.io/api/core/OnInit]

您的get请求应在ngOnInit（）中，如下所示：

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

创建新数据后，调用ngOnInit（）函数，然后您的表格将被更新。

Answer 4

@sammyleighg尝试这样，

成功发布数据后，您可以更新游戏列表，只需对服务器再发起一次http调用。

创建简化逻辑的方法。

Component.ts

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();
         }

    })

}

我建议使用ngOnInit()进行Api通话，而不要使用 constructor()

执行HTTP发布后HTML表不会自动更新

4 个答案: