Question

我有一个组件可以添加产品类型列表（例如＆＃39; Dramma＆＃39;，＆＃39; Comedy＆＃39;等）。组件的代码是：

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 value after adding genre

当我删除一个类型时，事情变得更加奇怪。因为在这种情况下它不会返回任何Event对象。

$event value after deleting genre

Answer 1

我认为不同的功能定义可能是造成这种差异的原因。你可以让他们两个相同，并检查控制台agaon。

removeGenre(genre) {

addGenre(genre: HTMLInputElement) {

或者使用以下链接了解eventemitter如何在角度中工作。 https://toddmotto.com/component-events-event-emitter-output-angular-2

Angular 5 EventEmmiter不仅返回值

1 个答案: