Попытка удалить запись списка, используя различные компоненты

Question

Я пытаюсь разрешить пользователю удалить элемент из списка действий. Я хотел бы отправить событие из компонента item приложения, в котором затем можно использовать компонент root. При нажатии кнопки «Удалить» в элементе списка ничего не происходит, и я не уверен, почему ...

Вот компонент списка html:

<div class="row">
    <div class="new-item">
        <p class="desc">{{item.desc}}</p>
        <p class="start">{{item.start}}</p>    
        <p class="end">{{item.end}}</p>
        <button class="btn-danger"><i class="glyphicon glyphicon-remove" (click)="deleteItem(item)"></i></button>
    </div>
</div>

Файл Typescript компонента списка:

@Component({
  selector: 'app-item',
  templateUrl: './item.component.html',
  styleUrls: ['./item.component.css']
})
export class ItemComponent implements OnInit {
  @Input() item: {desc: string, start: any, end: any} 

  deleteItemEvent = new EventEmitter();

  deleteItem(item) {
    this.deleteItemEvent.emit(item);
  }

  constructor() { }

  ngOnInit() {
  }

} 

Вот этот компонент приложения html файл:

<div class="text-center">
    <h1>To Do List</h1>
</div>
<app-users-input (gotUserInput)="afterUserInput($event)"></app-users-input> 
<br>
<div class="row">
    <div class="list">
        <app-item *ngFor="let item of items; index as i" (deleteItemEvent)="removeItem(i)" [item]="item"></app-item> 
    </div>
</div>

Файл приложения: Машинописный файл:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  items = [];  

afterUserInput(serverData: {desc: string, start: number, end: number}) { 
  this.items.push({
    desc: serverData.desc,
    start: serverData.start,
    end: serverData.end
})

};

removeItem(item) {
  this.items.splice(item, 1);
}


}

Есть еще один компонент, которого у меня нет включены сюда, так как я не считаю это актуальным. Надеюсь, кто-то может помочь!

Answer 1

Вам необходимо использовать декоратор @Output() для вашего мероприятия.

list-component.ts

@Output() deleteItemEvent = new EventEmitter();

Из @EventEmitter документов :

Используется в компонентах с директивой @Output для синхронной или асинхронной генерации пользовательских событий и регистрации обработчиков для этих событий путем подписки на экземпляр.