HTML表在执行HTTP post后不会自动更新

我为一个“游戏库”创建了一个虚拟网站，只是为了教自己http POST、GET、PUT和DELETE方法，我有一个单独的api文件，里面有3个“游戏”。当我输入一个新的游戏名称并单击“输入”时，该帖子确实有效，但当我刷新页面时，我的html表格会显示前三个游戏加上我刚刚发布的一个游戏。我想让它张贴，然后显示在表上的权利，而不是必须刷新页面，因为它有点邋遢在我看来

我试过把输入框放在桌子上面，但我真的不知道还有什么好尝试的

这是您库中当前游戏的列表
身份证件
名称
{{game.id}
{{game.name}

公共游戏：任意=[]；
专用url=http://localhost:3000/api/games';
构造函数（私有httpClient:httpClient）{
httpClient.get（this.url）.subscribe（response=>{
这个游戏=反应；
});
}
createGame（名称：HTMLInputElement）{
让post={name:name.value}；
name.value=''；
let headers=新的HttpHeaders（）；
headers=headers.set（'Content-Type'，'application/json'）；
this.httpClient.post（this.url，{id:this.games.length+1，name:post.name}，{headers}）
.订阅（响应=>{
console.log（响应）
})
}

---

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

您必须将新创建的游戏添加到

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;

---

您没有检索回更改的数据。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调用来更新数据。您可以使用它来最初加载数据，以及在创建新游戏后进行更新。

您必须在组件上实现OnInit，请参阅此处的文档[

get请求应该位于ngOnInit（）中，如下所示：

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

创建新数据后，调用ngOnInit（）函数并

---

您的表格将被更新。

@sammyleigh请像这样尝试

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

创建一个简化逻辑的方法

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

    })

}

---

我建议使用它来进行Api调用，而不是使用构造函数（）

@porgo我一直在用它来重新加载数据，从来没有遇到过问题，但它可能不是最好的way@porgo没错。

ngOnInit（）

仅用于组件初始化和刷新目的。尽量不要在后续调用中使用它。@Théomulart这不是一个好的做法。它在低规模应用程序中不起作用。但在广泛的功能性应用程序中会失败。@Théomulart可能您还没有问题。但是

ngOnInit

用于组件初始化，如@Arctezy s是的。除了从后端获取数据，你还可以做更多的操作。这可能会给更大的应用程序带来问题。好的，谢谢你的建议，我不会再这样做了。非常感谢你修复了这个问题，除了put请求，我如何着手修复相同的问题。put用于编辑游戏？你能发布你的

编辑

吗hod？让PutURL=''+UserInputId；让headers=new HttpHeaders（）；headers=headers.set（'Content-Type'，'application/json'）；让game={id:UserInputId，name:UserInputName}this.httpClient.put（PutURL，game，{headers}）。订阅（响应=>{console.log（响应）；}）