Angular 5 EventEmmiter возвращает не только значения

Question

У меня есть компонент для добавления списка жанров продукта (например, «Драмма», «Комедия» и т. Д.).Код компонента:

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { FormArray, FormControl } from '@angular/forms';
import { GENRES } from '../mock-genres';

@Component({
  // tslint:disable-next-line:component-selector
  selector: 'genre',
  template: `
    <label for="genres">Жанр(ы)</label>
    <select class="form-control" name="genres" (change)="addGenre(genre)" #genre>
      <option *ngFor="let genre of genresList">{{ genre }}</option>
    </select>
    <ul id="genres-list" class="list-group">
      <li
        class="list-group-item genre"
        *ngFor="let genre of genres"
        (click)="removeGenre(genreItem.innerText)"
        #genreItem>
        {{ genre }}
      </li>
    </ul>
  `,
  styleUrls: ['./genre.component.scss']
})
export class GenreComponent implements OnInit {

  genres: String[] = [];
  @Input('type') type: String;
  @Output('change') change = new EventEmitter<String[]>();
  public genresList: String[];

  ngOnInit() {
    switch (this.type) {
      case 'films':
        this.genresList = GENRES.filmGenres;
        break;
      case 'books':
        this.genresList = GENRES.bookGenres;
        break;
      case 'music':
        this.genresList = GENRES.musicGenres;
        break;
    }
  }

  addGenre(genre: HTMLInputElement) {
    if (genre.value !== '') {
      this.genres.push(genre.value);
      this.change.emit(this.genres);
    }
  }

  removeGenre(genre) {
    for (let i = 0; i < this.genres.length; i++) {
      if (this.genres[i] === genre) {
        this.genres.splice(i, 1);
        this.change.emit(this.genres);
        return;
      }
    }
  }

}

Вот как я называю его во внешнем компоненте:

<genre (change)="updateGenres($event)" [type]="'books'"></genre>

Но когда я пытаюсь добавить новый жанр, $event возврат объектане только обновленные жанры, но и объект Event.

$ значение события после добавления жанра

Вещи становятся более странными, когда я удаляю жанр.Потому что в этом случае он не возвращает объект Event.

$ значение события после удаления жанра

Answer 1

Я думаю, что различные определения функций могут быть причиной этого расхождения.Можете ли вы сделать их одинаковыми один раз и проверить консоль еще раз.

removeGenre(genre) {

addGenre(genre: HTMLInputElement) {

Или воспользуйтесь следующей ссылкой, чтобы узнать, как работает Eventemitter в угловом режиме.https://toddmotto.com/component-events-event-emitter-output-angular-2