how to get put request working in angular using a rest API

Question

Im working on my own project, its a game library, I have a separate file with my hard coded data in where each item has an Id and a name. The problem im having is my component.ts file cannot see the value of id, even though my get request works perfectly fine and displays the id and the name in a table. Im following a tutorial but adapting it so it works for mine however this causes issues when I cant ask for help on my specific problems.

I have tried changing variable names incase I messed something up that way but that didn't do it so im not sure what else to do to be honest.

<table>
  <tr>
    <th></th>
    <th>Id</th>
    <th>Name</th>
  </tr>
  <tr *ngFor="let game of games">
    <button (click)="updateGame($game)" class="btn btn-default btn-sm">Update</button>
    <td>{{game.id}}</td>
    <td>{{game.name}}</td>
  </tr>
</table>

export class UpdateGameBodyComponent {
  public games: any = [];

  constructor(private httpClient: HttpClient) {
    httpClient.get('http://localhost:3000/api/games').subscribe(response => {
      this.games = response;
    });
  }

  updateGame(game) {

    this.httpClient.put('http://localhost:3000/api/games' + '/' + game.id, JSON.stringify({
        isRead: true
      }))
      .subscribe(response => {
        console.log(response);
      })
  }
};

When I click the update button the console displays an error saying it cannot get the value of Id, i would like to fix that issue so that i can continue making the put request work.

Answer 1

在HTML中将'$ game'更改为'game'，因为* ngFor返回值而不是DOM事件

<button (click)="updateGame(game)" class="btn btn-default btn-sm">Update</button>