I've run into an issue in my Angular 2 app while trying to remove an item from an array using the splice method. Whenever I click on the garbage icon next to an item, instead of deleting that specific item, it ends up removing the last item in the array. How can I modify my code to ensure that only the clicked item is deleted, rather than the last one?
Below is some information about my component:
zipcodes = [
{ id: 3, zipcode: '75201', city: 'Dallas' },
{ id: 8, zipcode: '75205', city: 'Dallas' },
{ id: 1, zipcode: '77001', city: 'Houston' },
{ id: 2, zipcode: '78703', city: 'Austin' },
];
deleteZip() {
console.log('Delete zip clicked...');
this.zipcodes.splice(this.zipcodes.indexOf(this.zipcode), 1);
}
And here are the relevant parts of my component template/view:
<div *ngFor="let zipcode of zipcodes">{{zipcode.zipcode}} -- <span>{{zipcode.city}}</span><span class="delete-option" (click)="deleteZip()"><i class="material-icons">delete</i></span></div>