0

Tenho dois componentes que devem ser renderizados conforme uma expressão:

HTML:

<div *ngFor="let avaliacao of avaliacoes" [ngSwitch]="escolha_layout_avaliacao">
      <app-avaliacao-produto-modelo-emoji *ngSwitchCase="emoji" [avaliacao]="avaliacao"></app-avaliacao-produto-modelo-emoji>
      <app-avaliacao-produto *ngSwitchDefault [avaliacao]="avaliacao"></app-avaliacao-produto>
</div>

TS:

escolha_layout_avaliacao: string

ngOnInit() {
  this.buscaDadosLayout()
}

buscaDadosLayout(){
  this.escolha_layout_avaliacao = "emoji"
}

Porém o ngSwitch está renderizando o default., ignorando a condição que tem como valor emoji.

Eu testei no html através da interpolação: {{escolha_layout_avaliacao}} e o valor printado é "emoji", mas mesmo assim ainda não é renderizado aquele componente, e sim o definido no *ngSwitchDefault.

1 Resposta 1

1

Para resolver o problema substitua:

*ngSwitchCase="emoji"

por

*ngSwitchCase="'emoji'"

Nesse caso, o angular estava tentando comparar a variável "escolha_layout_avaliacao" com a variável "emoji" que não existe.

Adicionando aspas simples ("'emoji'") você vai comparar a variável "escolha_layout_avaliacao" com a STRING "emoji".

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 .