Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Angular2 - Chamando método filtrarEstado

por Guilherme Costa Lopes
| 182.2k xp | 609 posts

Tenho este método, ao escolher um país, busca os estados.

  filtrarEstado(pais : Pais) : void{
    this.loading = true;
    this.estadoService.getEstadosPorPais(pais).subscribe( 
      (data :any) => {
        this.estados = data.lista;
        this.loading = false;
      }
    );
  }

Componente no HTML

<mat-form-field class="formulario-full-width">
            <mat-select placeholder="País" name="pais" 
              [(ngModel)]="municipioBuscar.paisId" 
              matTooltip="Deve selecionar um país">
              <mat-option (blur)="filtrarEstado(0)">Nenhum</mat-option>
              <mat-option *ngFor="let pais of paises" [value]="pais" 
                (blur)="filtrarEstado(pais)">{{pais.descricao}}
              </mat-option>
            </mat-select>
          </mat-form-field>

Mas quando escolho nenhum, não executa o método filtrarEstado, assim o componente estado fica preenchido com os estados do último país escolhido.

O que tem de errado ?

3 respostas
solução!
por Gabriel Leite
| 3485k xp | 5398 posts
Instrutor

Boa tarde, Guilherme! Como vai?

Vc pode fazer o seguinte:

// meu-componente.ts

export class MeuComponente  {
  banco = { id: 2 };

  instituicoes = [
    { id: 0, nome: 'Banco do Brasil' },
    { id: 1, nome: 'Itaú' },
    { id: 2, nome: 'Inter' },
  ];

  atualiza(evento) {
    console.log(isNaN(evento.target.value));

    if (isNaN(evento.target.value)) {
      // valor selecionado não é um número
      // lista de estados recebe um array vazio
    } else {
      // valor selecionado é um número
      // lista de estados recebe um array com os estados do país
    }
  }
}

<!-- meu-componente.html -->
<select [(ngModel)]="banco.id" name="banco" (change)="atualiza($event)">
    <option>Nenhum</option>
    <option [value]="item.id" *ngFor="let item of instituicoes">{{item.nome}}</option>
</select>

Exemplo prático aqui!

Qualquer coisa é só falar!

Grande abraço!

por Guilherme Costa Lopes
| 182.2k xp | 609 posts

Aqui ficou um pouco diferente na parte do TS. Deve ser por causa do componente.

filtrarEstado(evento : any) : void{
    if (isNaN(evento.value)) {
      this.estados = null;
    } else {
      this.loading = true;
      let paisBuscar = new Pais;
      paisBuscar.id = evento.value;
      this.estadoService.getEstadosPorPais(paisBuscar).subscribe( 
        (data :any) => {
          this.estados = data.lista;
          this.loading = false;
        }
      );
    }
  }

Mas funcionou.... Obrigado mais uma vez.

por Gabriel Leite
| 3485k xp | 5398 posts
Instrutor

Por nada, Guilherme! Sempre que tiver qualquer dúvida é só mandar aqui no fórum!

Grande abraço!