Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

*ngIf não funciona

Bom dia pessoal. Tudo bem?

Estou com um problema aqui no trabalho com um *ngIf em uma div que não quer funcionar de jeito nenhum.

Meu problema é o seguinte: Eu possuo dois components, um chamado 'menu' e outro chamado 'graficos'. No 'menu' possui duas divs, dependendo de em qual você clicar, o ele mostra ou esconde uma div no 'graficos'.

O código HTML está mais ou menos assim:

HTML no 'menu'

<div class="grafico-barra" (click)="mostrarBarra()">
    //código html
</div>

<div class="grafico-pizza" (click)="mostrarPizza()">
    //código html
</div>


HTML do 'graficos'

<div class="dados-barra" *ngIf="graficoBarra">
    //código html
</div>

<div class="dados-pizza" *ngIf="graficoPizza">
    //código html
</div>

As variáveis graficoBarra e graficoPizza são booleanas e eu consigo trocar elas de true para false e vice-versa com as funções mostrarBarra() e mostrarPizza(). Porém, a div no componente 'gráficos' não some ou desaparece. Eles são componentes filhos de um mesmo pai. Tentei usar um serviço pra fazer isso e não funcionou. Tentei importar um componente no outro pra fazer isso e não funcionou. Na verdade, a variável é trocada normalmente nos dois modos que fiz, porém, a div não desaparece e aparece a outra.

Alguém pode me ajudar? Eu tenho que importar algum componente do Angular pra isso funcionar?

Obrigado!!

5 respostas

Boa tarde, Eduardo! Como vai?

Só com o seu HTML fica difícil dizer o problema. Cole aqui as classes dos seus componentes citados para que eu possa dar uma olhada e tentar te ajudar.

Gabriel, eu resolvi colocando tudo em um componente só. Mas não sei se é o correto. Chegando em casa, posso colocar tudo aqui pra você entender melhor.

Sendo componentes diferentes o ideal é não colocar tudo dentro de um só componente. Manda aí o código quando vc puder que a gente tenta fazer o código funcionar de um modo mais elegante!

Até lá!

É que estou criando um dashboard para o sistema da empresa que trabalho.

Eu criei um component chamado dashboard, nesse component criei mais dois componentes, o primeiro é o menu, que será quatro caixas com informações dentro, ao clicar nas caixas (que são divs estilizadas por mim) no componente menu, trocaria a div que está aparecendo no segundo componente, que é o componente gráficos. Ele teria 4 divs, cada uma com um gráfico, e dependendo em qual caixa do menu você clicar, esconderia ou apareceria a div correspondente no componente gráfico.

As variáveis booleanas usada no *ngIf eu consigo trocar elas de true pra false ou vice-versa, só que as divs não somem nem desaparece.

Depois vou tentar colocar fotos pra entender melhor o que eu estou dizendo.

solução

Eduardo, segue o exemplo que fiz aqui:

// grafico.module.ts

@NgModule({
    declarations: [
      GraficoComponent,
    ],
    imports: [
      CommonModule  // Necessário para usar o *ngIf! Importar de @angular/common
    ],
    exports: [
      GraficoComponent
    ],
    providers: []
  })
  export class GraficoModule { }
// grafico.component.ts

@Component({
  selector: 'app-grafico',
  templateUrl: './grafico.component.html'
})
export class GraficoComponent {

  @Input() tipo;

}
<!-- grafico.component.html -->

<div *ngIf="tipo == 1">gráfico 1</div>
<div *ngIf="tipo == 2">gráfico 2</div>
<div *ngIf="tipo == 3">gráfico 3</div>
// menu.module.ts

@NgModule({
    declarations: [
      MenuComponent
    ],
    exports: [
      MenuComponent
    ],
    providers: []
  })
  export class MenuModule { }
// menu.component.ts

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html'
})
export class MenuComponent {

  @Output() graficoSelecionado: EventEmitter<number>  = 
    new EventEmitter();

  selecionaGrafico(graficoId) {
    this.graficoSelecionado.emit(graficoId);
  }
}
<!-- menu.component.html -->

<button (click)="selecionaGrafico(1)">Gráfico 1</button>
<button (click)="selecionaGrafico(2)">Gráfico 2</button>
<button (click)="selecionaGrafico(3)">Gráfico 3</button>
// dashboard.module.ts

@NgModule({
    declarations: [
      DashboardComponent
    ],
    exports: [
      DashboardComponent
    ],
    imports: [
      MenuModule,
      GraficoModule
    ],
    providers: []
  })
  export class DashboardModule { }
// dashboard.component.ts

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html'
})
export class DashboardComponent {

  graficoId = 1;

  alteraGrafico(graficoId) {
    this.graficoId = graficoId;
  }
}
<!-- dashboard.component.html -->

<app-menu (graficoSelecionado)="alteraGrafico($event)"></app-menu>
<app-grafico [tipo]="graficoId"></app-grafico>
// app.module.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    DashboardModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
<!-- app.component.html -->

<app-dashboard></app-dashboard>

Veja que essa é uma solução bem elegante e totalmente componentizada e desacoplada uma vez que os componentes app-menu e app-grafico não se conhecem e não dependem um do outro. Claro que as escolha dos números que eu estou passando para identificar os gráficos é totalmente questionável e não deve ser aplicada na vida real, no entanto, fiz dessa forma simples apenas de forma didática.

Qualquer dúvida sobre a solução que implementei é só falar! Diz aí, o que achou? Bacana, né?

Grande abraço e bons estudos!