javascript - Ta bort objekt från array - Angular 4

Jag arbetar på en enkel todo-app i Angular4. Jag har appen uppsatt på följande sätt:

Formulärkomponent: Detta är formuläret för att lägga till saker i att-göra-listan
Objektkomponent: Detta är den enskilda komponenten.
Appkomponent: Jag har en *ngFor-loop här som kommer att lista alla att-göra-objekt.

Jag har lagt till en ny knapp på artikelkomponenten som ska ta bort artikeln, men jag kan inte lista ut hur jag ska "hitta" eller "lokalisera" rätt indexnummer för artikeln för att splica eller filtrera bort den.
Jag har inkluderat en länk till GitHub-förvaret här

app.component.html:

<app-navbar></app-navbar>
<div class="container">
  <app-form (itemAdded)="onItemAdded($event)"></app-form>
  <div class="row">
    <div class="col-md-3 mb-3"
    *ngFor="let item of toDoList; let i=index">
      <app-item
      [listItem]="item"
      (itemDeleted)="onItemDeleted($event)"></app-item>
    </div>
  </div>
</div>

app.component.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  toDoList = [
    {
      name: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
    }
  ];

  onItemAdded(itemData: {itemName: string}){
    this.toDoList.push({
      name: itemData.itemName
    });
  }
  onItemDeleted(index: number){
    this.toDoList.splice(index, 1);
  }
}

form.component.html:

<div class="title">
  <h1 class="display-4">{{ title }}</h1>
</div>
<div class="input-group">
  <input type="text" class="form-control" [(ngModel)]="newItem">
  <span class="input-group-btn">
    <button class="btn btn-success" type="button" (click)="onAddItem()">
      <fa name="plus"></fa>
    </button>
  </span>
</div>

form.component.ts:

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

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
  @Output() itemAdded = new EventEmitter<{itemName: string}>();
  title = 'To-Do List';
  newItem = '';

  constructor() { }

  ngOnInit() {
  }
  onAddItem(){
    this.itemAdded.emit({itemName: this.newItem});
  }

}

item.component.html:

<div class="task">
  <div class="mb-5 d-flex justify-content-between">
    <fa name="circle-o" size="3x"></fa>
    <button type="button" name="delete" class="btn btn-danger align-self-end" (click)="onDeleteItem()"><fa name="trash"></fa></button>
  </div>
  {{item.name}}
</div>

item.component.ts:

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

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

  @Input('listItem') item: {name: string};
  @Output() itemDeleted = new EventEmitter<{index: number}>();

  constructor() { }

  ngOnInit() {
  }
  onDeleteItem() {
    this.itemDeleted.emit() //need help with this
  }
}

Svar #1

Prova så här:

<app-item [listItem]="item" (itemDeleted)="onItemDeleted(i)"></app-item>

onItemDeleted(index){ 
    this.toDoList.splice(index, 1); 
}

Svar #2

Du kan använda .filter():

onDeleteItem(id: number) {
    this.list = this.list.filter(item => item.id !== id);
}

eller du kan använda .splice(), men för att använda det måste du få indexet för objektet i arrayen:

const index: number = functionToGetTheIndex();
this.list.splice(index, 1);

För att få indexet kan du göra något liknande detta:

for(var i = 0; i < this.list.length; i++) {
   if(this.list[i].id === id) {
     return i;
   }
}

*Redigera: int bör vara nummer