Question

我在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的模板文件：

<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并导入输出和父组件调用（onToDoItemSelected）=“removeToDoItem（$ event）”。我希望这会有所帮助

Answer 2

我相信那是因为你没有向removeToDoItem提供正确的论据。在CheckList模板中，您有：

(itemClicked)="removeToDoItem(toDoItem)"

如果EventEmitter参数为emit，则$event实际上是(click)数据，就像(itemClicked)="removeToDoItem($event)"一样。所以你的代码应该是：

removeToDoItem

这应该将正确的数据传递给CheckList Public Class X Public P1 As Boolean Public P2 As String Public P3 As String End Class Public Class Y Public P1 As Boolean Public P2 As String Public P3 As String End Class而不做任何其他更改。

Answer 3

没有任何事件或@Output() itemClicked，因此(itemClicked)="removeToDoItem(toDoItem)"不会导致removeToDoItem()被调用。

也许你的意思是

(click)="itemClicked(toDoItem)

为什么EventEmitter对象不发出指定的实例？

3 个答案: