Listing an array within an angular JSON

Question

Good morning gentlemen, I am using the IGDB (Games) api for the realization of an angular site 7(typescript), in it when receiving a JSON I receive only the gender ID, but if in the call contextualize I can receive within the json, the id and the name (within a secondary array), would like to print on the profile screen that I am creating all the generos within the secondary array, or if there is no "Unfilled" in the case of the bottom print, I tried to perform only one test by taking the first position of the vector, it prints, but when there is nothing it error in the rest of the screen.

HTML :

<h3>{{game.name}}</h3>
        <p><img src="https://images.igdb.com/igdb/image/upload/t_cover_big/{{game.cover.image_id}}.jpg">
            <br><br><strong>Desenvolvedora:</strong> {{game.involved_companies[0].company.name}}
            <br><br><strong>Engine:</strong> {{game.game_engines[0].name}}
            <br><br><strong>Gêneros:</strong> {{game.genres[0].name}}

Service :

getGameById(id: string): Observable<Game[]> {

return this.http.post<Game[]>(`${FACELIST_API}` + '/games',`fields *, genres.name; where id = (${id});`, httpOptions);

And the component typescript.

export class GameprofileComponent implements OnInit {


  games: Game[]
  imgs: Cover[]

  constructor(private gammelistService: GammelistService, private route: ActivatedRoute) { }

  ngOnInit() {
    this.gammelistService.getGameById(this.route.snapshot.params['id']).subscribe(
      list => {
        let containsCover = list.filter(function (elem, i, array) {
          return elem.cover !== undefined;
        });
        this.games = containsCover;

      });
  }
}

And the JSON

[
    {
        "id": 81249,
        "cover": {
            "id": 67245,
            "image_id": "m5v5rte27ri2rj8i0e1j"
        },
        "genres": [
            {
                "id": 12,
                "name": "Role-playing (RPG)"
            },
            {
                "id": 31,
                "name": "Adventure"
            }
        ]
    }
]

Answer 1

Try this way:

<div *ngIf="game">
<h3>{{game.name}}</h3>
<p><img src="https://images.igdb.com/igdb/image/upload/t_cover_big/{{game.cover.image_id}}.jpg">

<br><br><strong>Desenvolvedora:</strong> {{game.involved_companies[0].company.name}}
<br><br><strong>Engine:</strong> {{game.game_engines[0].name}}

<ng-container *ngIf="game?.genres; else naoPreenchido">
    <br><br><strong>Gêneros:</strong>
    <div *ngFor="let genre of game.genres">
        {{genre.name}}
    </div>
</ng-container>

<ng-template #naoPreenchido>
    <br><br><strong>Gêneros:</strong> NÃO PREENCHIDO
</ng-template>