EventEmmiter не работает при нажатии кнопки

В моей системе есть экран, который при нажатии кнопки открывает модальное окно. На этом экране у меня есть следующий 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.info('teste',$event)
}

В моем модальном окне у меня есть несколько довольно простых полей формы с кнопкой для обновления.

edit.perfil.modal.ts

    import { Component, OnInit, Input, ViewChild, ElementRef, Output, EventEmitter } from "@angular/core";
import { FormGroup, FormBuilder, Validators } from "@angular/forms";
import { ActivatedRoute } from "@angular/router";
import { EditPerfilModalModel } from './../../../../core/models/edit-perfil-modal.model';
import { EditPerfilModalService } from './../../../../core/http/edit-perfil-modal.service';
import swal from "sweetalert";

@Component({
  selector: "foot-play-edit-perfil-modal",
  templateUrl: "./edit-perfil-modal.component.html"
})
export class EditPerfilModalComponent implements OnInit {

  public cmModel: any;
  public heigthModel: any;
  public countryModelId: any;
  public cityModelId: any;
  public stateModelId: any;
  public day: any;
  public month: any;
  public year: any;
  public days = [];
  public months = [];
  public years = [];
  public cm = [];
  public positions = [];
  public position1Model: any;
  public position2Model: any;
  public dominantFootModelId: any;
  public dominantFoot = [];
  public countries = [];
  public states = [];
  public cities = [];
  public editPerfilModal: EditPerfilModalModel;

  @ViewChild("position1") position1: ElementRef;
  @ViewChild("position2") position2: ElementRef;
  @ViewChild("warning") warning: ElementRef;

  @Input() showModalEdit: boolean;
  @Input() player: any;

  @Output() sendValue = new EventEmitter();

  public profileForm: FormGroup;

  constructor(private fb: FormBuilder, private modalService: EditPerfilModalService, private route: ActivatedRoute) {    
    this.profileForm = fb.group({
      cityId: [null],
      countryId: [null],
      dominantFoot: [null, Validators.required],
      heigth: [null, Validators.required],
      lastName: [null, Validators.required],
      name: [null, Validators.required],
      nickname: [null, Validators.required],
      position1: [null, Validators.required],
      position2: [null, Validators.required],
      stateId: [null],
      birthMonth: [null, Validators.required],
      birthYear: [null, Validators.required]
    });    
  }

  ngOnInit() {
    this.sendMessage();
    this.editPerfilModal = new EditPerfilModalModel();
    this.position1Model = 0;
    this.position2Model = 0;
    this.dominantFootModelId = 0;
    this.editPerfilModal.height = null;
    this.stateModelId = 0;
    this.cityModelId = 0;
    this.countryModelId = 0;
    this.editPerfilModal.dominantFoot = null;
    this.day = null;
    this.month = null;
    this.year = null;
    this.editPerfilModal.id = parseInt(this.route.snapshot.paramMap.get("id"));
    this.cmModel = null;
    this.heigthModel = null;

    for (let day = 1; day < 32; day++) {
      this.days.push(day);
    }

    for (let month = 1; month < 13; month++) {
      if (month < 10){
        this.months.push('0'+month);
      }
      else{
        this.months.push(month);
      }
    }

    for (let cm = 1; cm < 100; cm++) {
      this.cm.push(cm);
    }

    for (let year = 1980; year <= 2019; year++) {
      this.years.push(year);
    }

    this.patchValueForm();    
    this.getCountry();
    this.getPosition();
    this.getDominatFoot();
    this.getProfile();

  }

  patchValueForm() {
    this.profileForm.patchValue({
      cityId: "",
      countryId: "",
      dominantFoot: "",
      heigth: "",
      lastName: "",
      name: "",
      nickname: "",
      position1: "",
      position2: "",
      stateId: "",
      birthMonth: "",
      birthYear: ""
    });
  }

  /**
  * Verifica se os campos da posição são iguais
  */

  changePosition() {

    // Cores padrões dos elementos
    this.position2.nativeElement.style.borderColor = "#BEBEBE";
    this.warning.nativeElement.style.display = "none";

    if (this.position1.nativeElement.value === this.position2.nativeElement.value) {
      // Mudança de cor ao verificar como resultados iguais
      this.position2.nativeElement.style.borderColor = "red";
      this.warning.nativeElement.style.display = "block";

      this.positions.filter((value, index) => {
        this.position2.nativeElement.value = !this.position1.nativeElement
        .value;
      });
    }
  }

  sendMessage() {

  }

  private getProfile(){
    this.modalService.getProfile(this.editPerfilModal.id).subscribe(data => {
      var res = data.data['birthday'].split("-");        
      this.day = res[2];
      this.month = res[1];
      this.year = res[0];
      this.editPerfilModal = data.data;
      this.position1Model = this.editPerfilModal.position1Id;
      this.position2Model = this.editPerfilModal.position2Id;
      this.countryModelId = this.editPerfilModal.country['id'];
      this.dominantFootModelId = data.data.dominantFootId;
      this.cityModelId = this.editPerfilModal.city['id'];
      this.stateModelId = this.editPerfilModal.state['id'];
      this.getStates(this.countryModelId);
      this.getCities(this.stateModelId);      
    })
  }


  /**
  * Busca todas as posições
  */
  public getPosition(){
    this.modalService.getPosition().subscribe(data => {
      let first = {label: 'Selecione', id: 0}
      this.positions = data;
      this.positions.unshift(first);
    });
  }


  /**
  * Busca pelo pé dominante
  */
  public getDominatFoot(){
    this.modalService.getDominantFoot().subscribe(data => {
      let first = {label: 'Selecione', id: 0}
      this.dominantFoot = data;
      this.dominantFoot.unshift(first)
    })
  }


  /**
  * Busca todos os paises
  */
  private getCountry(){
    this.modalService.getCountry().subscribe(data => {
      let first = {id: 0, name: 'Selecione'}
      this.countries = data.data;
      this.countries.unshift(first);
    })
  }


  /**
  * Busca os estados a partir da seleção de país
  */
  public getStates(countryId){
    for(let i = 0; i < this.countries.length; i++){
      if (this.countries[i].id == countryId){
        this.states = this.countries[i]['states'];
      }
    }
  }

  /**
  * Busca as cidades a partir da seleção de estados
  */
  public getCities(event){
    for(let i = 0; i < this.states.length; i++){
      if (this.states[i].id == event){
        this.cities = this.states[i]['cities'];
      }
    }
  }


  /**
  * Atualiza Perfil
  */
  updateProfile(){
    this.sendValue.emit('teste')
    this.editPerfilModal.height = this.heigthModel + this.cmModel;
    this.editPerfilModal.birthday = this.day + '-' + this.month + '-' + this.year;
    let obj = {
      birthday: this.editPerfilModal.birthday,
      cityId: this.cityModelId,
      countryId: this.countryModelId ,
      dominantFoot: this.dominantFootModelId,
      height: Number(this.editPerfilModal.height),
      id: this.editPerfilModal.id,
      name: this.editPerfilModal.user['name'],
      lastName: this.editPerfilModal.user['lastName'],
      nickname: this.editPerfilModal.nickname,
      stateId: this.stateModelId,
      position1Id: Number(this.position1Model),
      position2Id: Number(this.position2Model),
      userId: this.editPerfilModal.user['id']        
    }
    this.modalService.updateProfile(obj).subscribe(data => {

      if (data){
        swal(
          "",
          "Perfil atualizado com sucesso!",
          "success"
          );
          this.showModalEdit = false;
        }
      })
    }
  }

edit.perfil.modal.html

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

Проблема в том, что функция this.sendMessage() не вызывается. Я уже пробовал ставить emit(), уже пытался создать кнопку p test и т.б. не получилось. Однако, если я помещаю эту функцию в onInit(), она вызывается. То есть не работает с кликом

Можете ли вы предоставить StackBlitz?

Prashant Pimpale 21.03.2019 15:00

не могли бы вы предоставить edit.perfil.modal.ts полный код?

samb102 21.03.2019 15:01

@ samb102 это полный код

Daniel Swater 21.03.2019 15:07

Я сделал базовый StackBlitz (stackblitz.com/edit/angular-rn52ub), и у меня нет никаких проблем. Вы уверены, что в вашей консоли нет других ошибок?

Antoine Delia 21.03.2019 15:25

@ samb102 в консоли нет ошибок

Daniel Swater 21.03.2019 15:43
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
5
67
1

Ответы 1

Вы должны обновить свой @Output, чтобы использовать:

@Output() sendValue = new EventEmitter<string>();

это позволит вам отправить значение в Event.

Другие вопросы по теме