0

Tenho uma tela no meu sistema que, ao clicar em um botão, abre uma janela modal. Nessa tela tenho o seguinte html:

info-atleta.component.html

<foot-play-edit-perfil-modal (sendValue)="receiveMessage($event)" 
[player]="player" [showModalEdit]="showModalEditPerfil"></foot-play- 
edit-perfil-modal>

info-atleta.component.ts

receiveMessage($event) {
   console.log('teste',$event)
}

Na minha modal eu tenho alguns campos de formulário, bem básico com um botão para atualizar

edit.perfil.modal.ts

@Output() sendValue = new EventEmitter<any>();
...
sendMessage() {
  this.sendValue.emit('teste')
}
...
updateProfile(){
  this.sendMessage()
}

edit.perfil.modal.html

    <foot-play-modal title="Editar Perfil" [showModal]="showModalEdit">
    <div class="big-modal">

        <div class="perfil-modal">
            <div class="perfil-modal__content">
                <div class="perfil-modal__group1">
                    <label for="club-name">Nome </label>

                    <input type="text" id="club-name" placeholder="Seu nome" [(ngModel)]="editPerfilModal?.user?.name && editPerfilModal.user.name">

                    <label for="club-email">Apelido</label>
                    <input type="email" id="club-email" placeholder="Seu apelido" [(ngModel)]="editPerfilModal.nickname">

                    <label for="position1">Posição 1</label>
                    <select id="position1" #position1 (change)="changePosition()" [(ngModel)]="position1Model">
                        <option *ngFor="let position of positions; let value = index" [value]="position.id"> {{ position.label }}</option>
                      </select>

                    <label>Altura</label>
                    <div class="flex">

                        <select class="margin-right" name="usercharge" id="usercharge" [(ngModel)]="heigthModel">
                            <option [ngValue]="null">Selecione</option>
                            <option [ngValue]="1">1 m</option>
                            <option [ngValue]="2">2 m</option>
                            <option [ngValue]="3">3 m</option>
                            <option [ngValue]="4">4 m</option>
                        </select>

                        <select name="usercharge" id="usercharge" [(ngModel)]="cmModel">
                            <option [ngValue]="null">Selecione</option>
                            <option *ngFor="let cmValue of cm" [value]="cmValue">{{ cmValue }}</option>
                        </select>
                    </div>

                    <div>
                        <label for="countries">País</label>
                        <select name="countries" id="countries" [(ngModel)]="countryModelId" (ngModelChange)="getStates(countryModelId)">
                            <option [ngValue]="country.id" *ngFor="let country of countries">{{ country.name }}</option>
                        </select>
                    </div>

                    <div>
                        <label for="cities">Cidade</label>
                        <select name="brazil-cities" id="cities" [(ngModel)]="cityModelId">
                            <option value="0">Selecione</option>
                              <option [ngValue]="city.id" *ngFor="let city of cities">{{ city.name }}</option>
                          </select>
                    </div>

                </div>
                <!-- ./-->

                <div class="perfil-modal__group2">
                    <label for="username">Sobrenome</label>
                    <input type="text" id="username" placeholder="Sobrenome" [(ngModel)]="editPerfilModal?.user?.lastName && editPerfilModal.user.lastName">


                    <label>Data nascimento</label>
                    <div class="flex">
                        <select class="margin-right" [(ngModel)]="day">
                                <option [value]="null">Selecione</option>
                                <option *ngFor="let day of days" [value]="day">{{ day }}</option>
                            </select>

                        <select class="margin-right" [(ngModel)]="month">
                                <option [value]="null">Selecione</option>
                                <option  *ngFor="let month of months" [value]="month">{{ month }}</option>
                            </select>

                        <select [(ngModel)]="year">
                                <option [value]="null">Selecione</option>
                                <option *ngFor="let year of years" [value]="year">{{ year }}</option>
                            </select>
                    </div>

                    <label for="position2">Posição 2</label>
                    <select id="position2" #position2 (change)="changePosition()" [(ngModel)]="position2Model">
                          <option *ngFor="let position of positions; let value = index" [value]="position.id"> {{ position.label }}</option>
                        </select>
                    <div #warning *ngIf="position1Model == position2Model">
                        <foot-play-alert>
                            <p class="warning-text">Essa posição já foi selecionada na posição 1.</p>
                        </foot-play-alert>
                    </div>
                    <br>
                    <label for="dominant-foot">Pé domninante</label>
                    <select id="dominant-foot" [(ngModel)]="dominantFootModelId">
                          <option *ngFor="let foot of dominantFoot" [ngValue]="foot.id">{{ foot.label }}</option>
                        </select>


                    <label for="states">Estado</label>
                    <select name="brazil-states" id="states" [(ngModel)]="stateModelId" (ngModelChange)="getCities(stateModelId)">
                        <option value="0">Selecione</option>
                      <option *ngFor="let state of states" [ngValue]="state.id">{{ state.name }}</option>
                        </select>

                    <div class="perfil-modal__buttons">
                        <button class="btn btn--primary" (click)="updateProfile()">Salvar</button>
                    </div>
                    <!-- ./privacy-modal__buttons-->

                </div>
                <!-- ./-->
            </div>


        </div>
        <!-- ./-->

    </div>
    <!-- ./privacy-modal mini-modal-->

</foot-play-modal> 

O problema é que a função this.sendMessage() não é chamada. Já tentei colocar só o emit(), já tentei crar um botão p testar e tb não funcionou. Só que, se eu coloco essa funcção no onInit(), ela é chamada. Ou seja, não funciona com click

17
  • Você chegou a importar o EventEmitter? Commented 21/03/2019 às 12:05
  • Sim sim. Está importado Commented 21/03/2019 às 12:20
  • import { EventEmitter } from '@angular/core'; angular/core mesmo? Commented 21/03/2019 às 12:56
  • Sim, isso mesmo. Tanto é que no onInit() ele envia a mensagem, só não funciona no (click) e nem no (change) Commented 21/03/2019 às 13:06
  • 1
    Então ocorre a chamada para o "updateProfile" mas quando chama "this.sendMessage()" o "this.sendValue.emit('teste')" não é emitido?
    – RDyego
    Commented 21/03/2019 às 14:11

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .