1

Estou tentando fazer um "else if", para apresentar os itens da categoria escolhida pelo usuário através de um radio button. Só que só tenho "if" e "else" para apresentar no ng-template.

Montei uma sequência de fotos para explicar melhor a pergunta:

  1. A tela aparece assim primeiro: inserir a descrição da imagem aqui

  2. Se selecionar "Categoria", aparece uma tabela: inserir a descrição da imagem aqui

  3. Se seelcionar "Empresas", aparece outra tabela: inserir a descrição da imagem aqui

o resto do código funciona tranquilo, só essa dúvida de como fazer aparece a opção que o usuário escolher(no exemplo tem 3 opções [com a tela em branco], se a resposta for aplicada a 3 ou mais opções, também será aceita).

O código do html do componente:

<a (click)="goBack()" class="btn btn-warning btn-md m-3">
  <span class="glyphicon glyphicon-backward"></span><strong> &lt;&lt; Voltar </strong>
</a>
<div class="form-group">
  <label for="changeTipoTemplate" class="mx-3">Selecione o tipo de pesquisa: </label>
  <div class="form-check">
    Categoria<input class="form-check-inline ml-2" type="radio" name="optTipoTabela" value="1" id="checkinfo_1" (change)="changeTipoTemplate(1)">
    Empresa<input class="form-check-inline ml-2" type="radio" name="optTipoTabela" value="0" id="checkinfo_0" (change)="changeTipoTemplate(0)">
  </div>
</div>
<h4 class="m-3">Fiscal</h4>
<ng-container *ngIf="tipo_template === 1; else empresaTemplate">
  <div class="form-group w-50 mx-3">
    <label for="fiscalCategorias">Selecione a categoria:</label>
    <select class="form-control" id="fiscalCategorias" (change)="changeTable()">
      <option value="casn">Código Acesso Simples Nacional</option>
      <option value="municipios">Municípios</option>
      <option value="estados">Estados</option>
      <option value="ibge">IBGE</option>
      <option value="sefaz">SEFAZ</option>
      <option value="nfgaucha">NF Gaúcha</option>
      <option value="parcelamentos">Parcelamentos</option>
      <option value="prefeitura">Prefeitura</option>
      <option value="nfse">NFS-e</option>
    </select>
  </div>

  <div class="row mx-3">
      <prime-table [th]="th" *ngIf="fiscais.length > 0" [td]="fiscais"
          [btn_cadastra]="true" (outputAdd)="cadastrar()"
          [btn_edita]="true" (outputEdita)="editar($event)"
          [btn_deleta]="true" (outputDeleta)="deletar($event)"
      ></prime-table>
  </div>
</ng-container>
<ng-template #empresaTemplate>

  <div class="form-group w-50 mx-3">
    <label for="empresaCategorias">Selecione a empresa:</label>
    <select class="form-control" name="empresaCategorias" id="empresaCategorias" (change)="getAllRegistersOfEmpresa($event)">
      <option value="0"></option>
      <option value="{{ e.nome_empresa }}" *ngFor="let e of empresas">{{ e.nome_empresa }}</option>
    </select>
  </div>

  <div class="row mx-3">
    <prime-table [th]="th" *ngIf="fiscais.length > 0" [td]="fiscais"
        [btn_generico1]="true" [icone_generico1]="'fas fa-edit'" (outputGenerico1)="editarEmpresa($event)"
        [btn_generico2]="true" [icone_generico2]="'fas fa-eye'" (outputGenerico2)="ver($event)"
        [btn_deleta]="true" (outputDeleta)="deletar($event)"
    ></prime-table>
  </div>
</ng-template>
4
  • 2
    Acredito que aqui tenha a resposta para o que precisa: stackoverflow.com/questions/49217822/… Commented 14/05/2019 às 18:59
  • Opa, dei uma olhada e me pareceu que na resposta, o resultado é tipo "verdadeiro ou falso", isso o ngIf já faz por padrão quando, exibindo um template ou outro template. No meu caso, teria que aparecer um template de 3 ou 4 que podem aparecer na tela Commented 14/05/2019 às 19:14
  • 1
    Vc faria <ng-container *ngIf="tipo_template === 1">, no outro <ng-container *ngIf="tipo_template === 2">, em outro <ng-container *ngIf="tipo_template === 3"> etc.. Pelo o que entendi não precisa de else, ele vai mostrar seu container só se o tipo_template for o que está verificando Commented 14/05/2019 às 19:45
  • Fiz um teste aqui, colocando valores de 0 até 3 nos radio buttons, e fiz alguns ng-template, e aparentemente funcionou. Posta como resposta que vou aceitar ela @AndreVicente Commented 14/05/2019 às 20:21

1 Resposta 1

2

No caso do seu projeto não será necessário utilizar else, apenas utilizando o *ngIf em cada ng-container você consegue mostrar o conteúdo de acordo com o item selecionado.

Colocarei a função do arquivo .ts para referência futura.

changeTipoTemplate(tipo) {
     this.tipo_template = tipo;
}

Em seu html você passa o valor do item selecionado.

<div class="form-check">
   Categoria<input class="form-check-inline ml-2" type="radio" name="optTipoTabela" value="1" id="checkinfo_1" (change)="changeTipoTemplate(1)">
   Empresa<input class="form-check-inline ml-2" type="radio" name="optTipoTabela" value="0" id="checkinfo_0" (change)="changeTipoTemplate(0)">
   Outro<input class="form-check-inline ml-2" type="radio" name="optTipoTabela" value="2" id="checkinfo_2" (change)="changeTipoTemplate(2)">
</div>

Agora no mesmo html você monta o conteúdo da forma que deseja mostrar de acorda com a opção selecionada

<ng-container *ngIf="tipo_template === 0">
     <!-- Conteúdo 0 aqui -->
</ng-container>

<ng-container *ngIf="tipo_template === 1">
     <!-- Conteúdo 1 aqui -->
</ng-container>

<ng-container *ngIf="tipo_template === 2">
     <!-- Conteúdo 2 aqui -->
</ng-container>
1

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 .