1

Bom dia senhores, estou utilizando a api do IGDB (Games) para a realização de um site angular 7(typescript), nela ao receber um JSON recebo apenas o ID de gênero, mas se na chamada contextualizar consigo receber dentro do json, o id e o name(dentro de um array secundário), gostaria de imprimir na tela de profile que estou criando todos os generos dentro do array secundário, ou caso não exista um "Não preenchido", no caso do print a baixo, tentei realizar apenas um teste pegando a primeira posição do vetor, ele imprime, mas quando não existe nada ele da erro no restante da tela.

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

E o typescript do componente.

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;

      });
  }
}

E o JSON

[
    {
        "id": 81249,
        "cover": {
            "id": 67245,
            "image_id": "m5v5rte27ri2rj8i0e1j"
        },
        "genres": [
            {
                "id": 12,
                "name": "Role-playing (RPG)"
            },
            {
                "id": 31,
                "name": "Adventure"
            }
        ]
    }
]
1
  • tenta colocar um *ngIf="game" ai ele só vai mostrar se achar alguma coisa 17/06/2019 às 17:16

1 Resposta 1

1

Tente desta forma:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .