todo がデータベースに挿入されると、todo のリストに追加されるようにイベント エミッターを実装しようとしています。しかし、うまくいきません。以下のコードを見つけてください: todoinput コンポーネント (todo.input.html): データベースに todo を追加するコンポーネント
import { Component, OnInit, EventEmitter, Output } from '@angular/core';
import { Todos } from '../../models/Todos';
import { TodosService } from '../../services/todos.service';
@Component({
selector: 'app-todoinput',
templateUrl: './todoinput.component.html',
styleUrls: ['./todoinput.component.css']
})
export class TodoinputComponent implements OnInit {
@Output() newTodo: EventEmitter<Todos> = new EventEmitter();
constructor(private _todosService: TodosService) { }
ngOnInit() {
}
addTodo(text) {
this._todosService.addTodo({
text: text,
}).subscribe((todo) => {
this.newTodo.emit(todo);
})
}
}
app.component.html: すべてのコンポーネントを保持します。
<app-navbar></app-navbar>
<app-todoinput (newTodo)="onNewTodo($event)">
</app-todoinput>
<app-todolist>
</app-todolist>
todolist.component.ts: todo リストに todo を追加します。
import { Component, OnInit } from '@angular/core';
import { Todos } from '../../models/Todos';
import { TodosService } from '../../services/todos.service';
@Component({
selector: 'app-todolist',
templateUrl: './todolist.component.html',
styleUrls: ['./todolist.component.css']
})
export class TodolistComponent implements OnInit {
todos: Todos[]
constructor(private _todosService: TodosService) {
}
ngOnInit() {
this._todosService.getTodos().subscribe((todos) => {
this.todos = todos;
})
}
onNewTodo(todo: Todos) {
console.log('-- the passed todo --', todo);
this.todos.unshift(todo);
}
}
todo が db に追加されると、newTodo を発行しようとします。しかし、それは以下のエラーをスローします:
AppComponent.html:2 ERROR TypeError: _co.onNewTodo is not a function
at Object.eval [as handleEvent] (AppComponent.html:2)
at handleEvent (core.js:10258)
at callWithDebugContext (core.js:11351)
at Object.debugHandleEvent [as handleEvent] (core.js:11054)
at dispatchEvent (core.js:7717)
正しい実装のようです。誰が私が間違っているのか教えてもらえますか? Event Emitter では動作しませんか?
ありがとう