angular - TypeError: Kan inte läsa egenskapen 'player' av undefined

Jag arbetar för närvarande på ett projekt med Angular. Eftersom jag är ganska ny inom programmering vet jag inte vad jag ska göra med detta fel:

TypeError: Cannot read property 'player' of undefined. 

I princip vet jag inte var och hur jag ska definiera denna egenskap. Här är koden jag använder:

Min game.component.html:

<div class="container">
 <div class="playerBox">
  <table>
    <tr>
      <td class="player">Player: </td>
      <td class="player" [innerText]="games.player"></td>
    </tr>
    <tr>
      <td class="player">Round: </td>
      <td class="player" [innerText]="games.round"></td>
    </tr>
  </table>
 </div>
 <div class="content">
  <p [innerText]="games.question"></p>
  <button class="button" (click)="nextQuestion()">Next</button>
  <button class="button" routerLink="/home">Home</button>
 </div>
</div>

Game.component.ts:

import { Component, OnInit } from '@angular/core';
import { QuestionService } from '../../services/question.service';
import { Game } from "../../models/game";

@Component({
  selector: 'app-game',
  templateUrl: './game.component.html',
  styleUrls: ['./game.component.sass']
})
export class GameComponent implements OnInit {

  games: Game;

  constructor(private questionService: QuestionService) { }

  ngOnInit() {
    this.nextQuestion();
  }

  nextQuestion() {
    this.questionService.getQuestion().subscribe(data => {
      this.games = data;
    });
  }

}

Question.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { O`enter code here`bservable } from 'rxjs';
import { Game } from '../models/game';

@Injectable({
  providedIn: 'root'
})
export class QuestionService {

  constructor(private http: HttpClient) { }


  /* Get question from DB */
  getQuestion(): Observable<Game> {
    return this.http.get<Game>("//localhost:8443/api/next");
  }

  resetAll() {
    return this.http.get("//localhost:8443/api/reset");
  }

}

Och slutligen Game.ts:

export class Game {
  player: string;
  round: number;
  question: string;
}

Felet kastas i game.component.html rad 6.
Tack för all hjälp!

Svar #1

HTTP GET-förfrågan är ett asynkront anrop, så i det fallet kommer games att vara odefinierat tills det får värdet. Försök att sätta ett initialt värde för games-egenskapen.

 games: Game = new Game();

ett annat sätt är att använda ?. (säker navigeringsoperator)

<table>
    <tr>
      <td class="player">Player: </td>
      <td class="player" [innerText]="games?.player"></td>
    </tr>
    <tr>
      <td class="player">Round: </td>
      <td class="player" [innerText]="games?.round"></td>
    </tr>
  </table>

Svar #2

Problemet är här:

nextQuestion() {
    this.questionService.getQuestion().subscribe(data => {
         // Put debugger to check the value for games.
         debugger
         this.games = data;
    });
  }

Först kontrollera om data som kom tillbaka från servern till din getQuestion är korrekt, och om det förväntade inte alls kommer, då kan du med debuggern kontrollera värdena som tilldelats spel för vidare undersökning, annars ställ in ett standardvärde för spelet, det kommer att ändras när datan kommer in i abonnenten.

Om spel är tilldelat korrekt men spelaren är valfri, använd det så här i din HTML

[innerText]="games?.player"