5
respostas

Não recebe o valor do input

Ao clicar em transferir, o valor não é renderizado no htmlValores não exibidos no HTML

5 respostas

Olá Elisangela, tudo bem?

Poderia compartilhar o código do arquivo app.component.ts para te ajudar ?

import { TransferenciasService } from './transferencias.service';

import { Component } from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.scss'],

})

export class AppComponent {

title = 'ByteBank';

constructor(private service: TransferenciasService) {}

transferir($event) {

this.service.adicionar($event);

}

}

Olá, bom dia! Sigo com a dificuldade, alguem poderia me prestar um auxilio?

Olá Elisangela, tudo bem? Espero que sim. Bom, pelo que eu vi no seu print, a sua função que emite os dados para o AppComponent está funcionando, isso quer dizer que o evento aoTransferir está passando os dados preenchidos no formulário.

export class NovaTransferenciaComponent {

  @Output() aoTransferir = new EventEmitter<any>();

  valor: number;
  destino: number;

  transferir() {
    console.log('Solicitada nova transferência');
    const valorEmitir = {valor: this.valor, destino: this.destino};
    this.aoTransferir.emit(valorEmitir);
  }
}

Os dados vindos do objeto valorEmitir serão passados para o AppComponent usando o event binding para a função transferir($event).

<app-nova-transferencia (aoTransferir)="transferir($event)" ></app-nova-transferencia>

Esse parâmetro $event é quem armazenas os dados de um evento, portanto para que possamos visualizar esses dados é preciso atribuir em uma variável do AppComponent.

export class AppComponent {
  title = 'bytebank';

  destino: number;
  valor: number;

  transferir($event) {
    console.log($event);
    this.destino = $event.destino;
    this.valor = $event.valor;
  }
}

Lembre-se, o $event tem a seguinte estrutura], assim como a variável valorEmitir no NovaTransferenciaComponent :

$event = {
    valor: this.valor, 
    destino: this.destino
}

Com os valores passados para variáveis dentro do AppComponent, basta fazer a interpolação no template, desta forma:

<app-nova-transferencia (aoTransferir)="transferir($event)" ></app-nova-transferencia>

<p>Valor: {{ valor }}</p>
<p>Destino: {{ destino }}</p>

Espero ter ajudado. Se ainda estiver com dúvida, estou à disposição.

Olá. Devido ao longo tempo de resposta, segui o curso, e neste momento ao fim do modulo 06 - comunicação HTTP, sigo com a mesma dificuldade.

Vou abrir um novo questionamento no módulo pertinente.

Grata,