0

Estou tendo problemas com os componentes no Angular, eu tenho um componente que emite um evento quando seleciona um determinado item, e eu preciso usar ele 2 vezes na mesma pagina, porem o segundo componente assume o mesmo comportamento do primeiro, parece que são a mesma instancia.

<h1>Transferência</h1>
<div class="alert alert-danger" role="alert" *ngIf="erro">
  {{erro}}
</div>
<form [formGroup]="form" autocomplete="off">
  <div class="text-center">
    <app-procura-conta (contaSelecionada)="setContaOrigem($event)"
                       textoBotao="Procurar conta origem"></app-procura-conta>
  </div>
  <div class="row">
    <div class="col-md-6">
      <app-input id="agencia" placeholder="Digite a agência de origem" label="Agência de origem"
                 formControlName="agencia"
                 [model]="form.get('agencia')"></app-input>
    </div>
    <div class="col-md-6">
      <app-input id="conta" label="Conta de origem" placeholder="Digite o número da conta de origem"
                 formControlName="conta"
                 [model]="form.get('conta')"></app-input>
    </div>
  </div>
  <div class="text-center">
    <app-procura-conta (contaSelecionada)="setContaDestino($event)"
                       textoBotao="Procurar conta destino"></app-procura-conta>
  </div>
  <div class="row">
    <div class="col-md-6">
      <app-input id="agenciaDestino" placeholder="Digite a agência de destino" label="Agência de destino"
                 formControlName="agenciaFavorecido"
                 [model]="form.get('agenciaFavorecido')"></app-input>
    </div>
    <div class="col-md-6">
      <app-input id="contaDestino" label="Conta de destino" placeholder="Digite o número da conta de destino"
                 formControlName="contaFavorecido"
                 [model]="form.get('contaFavorecido')"></app-input>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <app-input id="valor" placeholder="Digite o valor que deseja transferir" label="Valor" formControlName="valor"
                 [model]="form.get('valor')"></app-input>
    </div>
  </div>
  <div class="text-center">
    <button (click)="transferir()" class="btn btn-primary" [disabled]="form.invalid">Transferir</button>
  </div>
</form>

O componente que eu falo é esse app-procura-conta, o segundo eu peço para ele usar o método setContaDestino, porem ele tá usando o setContaOrigem do primeiro. Segue o código dele:

import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {FormBuilder, FormControl, FormGroup} from '@angular/forms';
import {debounceTime, distinctUntilChanged, switchMap} from 'rxjs/operators';
import {ContaService} from '../conta.service';
import {ContaResponse} from '../../model/conta.model';

@Component({
  selector: 'app-procura-conta',
  templateUrl: './procura-conta.component.html',
  styleUrls: ['./procura-conta.component.css']
})
export class ProcuraContaComponent implements OnInit {
  form: FormGroup;
  campoBusca: FormControl;

  contas: ContaResponse[];

  @Output()
  contaSelecionada = new EventEmitter();

  @Input()
  textoBotao: string;

  constructor(private fb: FormBuilder, private contaService: ContaService) {
  }

  ngOnInit() {
    this.campoBusca = this.fb.control('');
    this.form = this.fb.group({
      termo: this.campoBusca
    });
    this.campoBusca.valueChanges.pipe(
      debounceTime(500),
      distinctUntilChanged(),
      switchMap(termo => this.contaService.busca(termo))
    ).subscribe(contas => this.contas = contas);
  }

  seleciona(conta: ContaResponse) {
    this.contaSelecionada.emit(conta);
  }
}

Alguém sabe como resolver?

2
  • Obs.: Estou usando o Angular 8.1.2 Commented 20/07/2019 às 17:05
  • Eu também percebo que está usando a mesma instancia, por que os atributos continuam com os valores que foram setados na busca do componente anterior. Commented 20/07/2019 às 17:08

1 Resposta 1

1

Descobri o problema, no componente app-procura-conta tem uma modal do Bootstrap que precisa de ID para funcionar corretamente, e eu não tinha me preocupado de mudar esse ID, e quando usei o componente 2 vezes na mesma pagina, ficou 2 IDs iguais, que acabou dando conflito no Bootstrap. Para resolver o problema, agora eu peço que passa o ID no componente reutilizável.

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 .