HTML таблица не обновляется автоматически после выполнения HTTP сообщения - PullRequest
Новая
       37

HTML таблица не обновляется автоматически после выполнения HTTP сообщения

0 голосов
/ 14 мая 2019

Я создал фиктивный веб-сайт для «библиотеки игр» только для того, чтобы научиться методам http POST, GET, PUT и DELETE, у меня есть отдельный файл для моего API с 3 «играми». Пост действительно работает, когда я введите новое имя игры и нажмите кнопку ввода, ничего не происходит, но когда я обновляю страницу, моя HTML-таблица отображает первые три игры плюс ту, которую я только что опубликовал. Я хотел бы, чтобы он был опубликован, а затем сразу же отображался на столе, а не обновлял страницу, как мне кажется, abit небрежно.

Я попытался поместить поле ввода над таблицей, но я действительно не знаю, что еще попробовать. 

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

    })

}

Я бы хотел, чтобы таблица автоматически обновлялась, когда я размещал в ней новую игру.

Ответы [ 4 ]

0 голосов
/ 14 мая 2019

@ 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()

0 голосов
/ 14 мая 2019

Вы не восстанавливаете измененные данные. После успешного вызова 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 для обновления данных. Вы можете использовать его для начальной загрузки данных, а также для обновления после создания новой игры.

0 голосов
/ 14 мая 2019

Вы должны внедрить OnInit в свой компонент, см. Документ здесь [https://angular.io/api/core/OnInit]

Ваш запрос на получение должен быть в ngOnInit () следующим образом: 

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

После создания новых данных вызовите функцию ngOnInit () и Ваша таблица будет обновлена.

0 голосов
/ 14 мая 2019

Вы должны добавить вновь созданную игру в массив 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;
...