EventEmitterオブジェクトが指定されたインスタンスを発行しないのはなぜですか？

Question

私はこれら2つのコンポーネントをAngular2に、そしてchecklistセレクタのテンプレートを持っています。

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

export class ToDoItem{ 
    toDo: string; 
    checked: boolean; 

    constructor(toDo:string, checked: boolean){ 
     this.toDo = toDo; 
     this.checked = checked; 
    } 
} 

@Component({ 
    selector: 'to-do', 
    inputs: ['toDoItem'], 
    outputs: ['onToDoItemSelected'], 
    styleUrls: ['./app.checklist.css'], 
    template: ` 
     <input type="checkbox"><label class="strikethrough">{{toDoItem.toDo}}</label><button (click)="itemClicked()">Delete</button> 
    ` 
}) 
export class ToDoItemComponent{ 
    toDoItem : ToDoItem; 

    onToDoItemSelected: EventEmitter<ToDoItem>; 

    constructor(){ 
     this.onToDoItemSelected = new EventEmitter(); 
    } 

    itemClicked() : void { 
     console.log(this.toDoItem); 
     this.onToDoItemSelected.emit(this.toDoItem); 
    } 
} 

@Component({ 
    selector: 'checklist', 
    templateUrl: './app.checklist.html' 
}) 
export class CheckList{ 
    toDoItems: Array<ToDoItem>; 

    constructor(){ 
     this.toDoItems = []; 
    } 

    createToDo(description: string) : void { 
     if (description !== ""){ 
      this.toDoItems.push(new ToDoItem(description, false)); 
     } 
    } 

    removeToDoItem(toDoItem: ToDoItem) : void { 
     console.log(toDoItem); 
     var indice = this.toDoItems.indexOf(toDoItem); 
     this.toDoItems.splice(indice, 1); 
    } 
} 

そして、これはクラスCheckList用のテンプレートファイルです：

まず、これら2つのコンポーネントである

<h2>A Checklist</h2> 
<span *ngIf="toDoItems.length == 0"> 
    There are not tasks yet... 
</span> 
<ul> 
    <li *ngFor="let toDoItem of toDoItems"> 
     <to-do [toDoItem]="toDoItem" (itemClicked)="removeToDoItem(toDoItem)"></to-do> 
    </li> 
</ul> 

<hr> 

<input type="text" placeholder="Enter the description..." #toDoDescription> 
<button (click)="createToDo(toDoDescription.value); toDoDescription.value = '' ">Add</button> 

基本的には、問題は、それがアイテムを削除しないことから構成されています。 EventEmitterは暗黙のうちにremoveToDoItemを呼び出しません。

いくつかの提案、アイデア、..それを解決するには？

Answer 1

インポートファイルが間違っている意味しました。これを行うには、このようなEventEmitterを使用する必要があります。

import { Component, EventEmitter, Input, Output } from '@angular/core'; 

      @Component({ 
       selector: 'rio-counter', 
       templateUrl: 'app/counter.component.html' 
      }) 
      export class CounterComponent { 
       @Input() count = 0; 
       @Output() result = new EventEmitter<number>(); 

       increment() { 
       this.count++; 
       this.result.emit(this.count); 
       } 
      } 

子クラスのHTML

<div> 
    <p>Count: {{ count }}</p> 
    <button (click)="increment()">Increment</button> 
</div> 

親コンポーネントは次のようにする必要があります。

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

@Component({ 
    selector: 'rio-app', 
    templateUrl: 'app/app.component.html' 
}) 
export class AppComponent implements OnChanges { 
    num = 0; 
    parentCount = 0; 

    ngOnChanges(val: number) { 
    this.parentCount = val; 
    } 
} 

親HTML部分

<div> 
    Parent Num: {{ num }}<br /> 
    Parent Count: {{ parentCount }} 
    <rio-counter [count]="num" (result)="ngOnChanges($event)"> 
    </rio-counter> 
</div> 

例rangle.ioノートから取ら参照用。 @Output（）onToDoItemSelectedを使用し、Outputを親コンポーネント呼び出し（onToDoItemSelected）= "removeToDoItem（$ event）"にインポートします。私はこれが助けてくれることを願っています

Answer 2

正しい引数をremoveToDoItemに指定していないためです。あなたのCheckListテンプレートでは、持っている：EventEmitterそれは(click)となりますようにあなたemitは、実際に$eventデータを引数にして

(itemClicked)="removeToDoItem(toDoItem)" 

を。だからあなたのコードは次のようになります。他に変更を加えることなく、CheckListのremoveToDoItemに正しいデータを渡す必要があります

(itemClicked)="removeToDoItem($event)" 

。

Answer 3

イベントまたは@Output() itemClickedがないため、(itemClicked)="removeToDoItem(toDoItem)"によってremoveToDoItem()が呼び出されません。

はおそらく、あなたは

(click)="itemClicked(toDoItem)