javascript - Ta bort knapp på listobjekt/array i Angular 12

Jag försöker ta bort ett listaobjekt med klickknappen, har provat olika alternativ men det verkar inte fungera. Hoppas du kan hjälpa mig med detta.

Vid klick vill jag ta bort ett listobjekt från min användararray. Jag kommer att länka Typescript-koden tillsammans med HTML.

//Typescript code
import { UsersService } from './../users.service';
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Iuser } from '../interfaces/iuser';

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

  @Input() item!: Iuser;
  @Output() userDeleted = new EventEmitter();
  

removeUser(item: any) {
    this.userDeleted.emit(item);
  }

  constructor() {}
  ngOnInit(): void {}
}

<th scope="row">{{item.id}}</th>
<td>{{item.name}}</td>
<td>{{item.lastname}}</td>
<td>{{item.city}}</td>
<td> <button class="btn btn-sm" (click)="removeUser(item)">remove</button></td>

Svar #1

Som @Priscila svarade, när knappen klickas, bör du bara avge åtgärden och låta föräldrakomponenten kontrollera respektive metod, dvs. radera eller lägga till.

För att på det sättet kommer det vara lätt för datan att manipuleras och hantera komponentens livscykel.

Håll aldrig de återvändsgränderna igång på appen.

Glad kodning :)