angular制作一个删除按钮时不管点击哪个按钮，删除的都是表格的最后一个元素。

angular制作一个删除按钮时不管点击哪个按钮，删除的都是表格的最后一个元素。
数据是在一个数组里存储的。
app.component.ts：

import { Component } from '@angular/core';
import { PatientData } from './PatientData';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'myapp';
  Patient = Patient;

del(Id: number){
 if (confirm('Are you sure delete this Item ?')) {
    const index = Patient.indexOf(Id);   
    const delEle = Patient.splice(index, 1);  
      console.log(index); 
    return Patient;            
}
 else {  
             return Patient;
        }  
 }
}
const Patient: any[]= [
    { Id: 0, FirstName: "Stark", LastName: "Bill", DateOfBirth: "2000/10/11", Gender: "Male", PrimaryInsurance: "Medicare", Address: "ddadsdasd", ContactNumber: "1338872818738", NextOfKin: "weqe" },
    { Id: 1, FirstName: "Shown", LastName: "Jenny", DateOfBirth: "2000/10/11", Gender: "Male", PrimaryInsurance: "Medicare", Address: "ddadsdasd", ContactNumber: "1338872818738", NextOfKin: "weqe" },
    { Id: 2, FirstName: "Geogrge", LastName: "Hash", DateOfBirth: "2000/10/11", Gender: "Male", PrimaryInsurance: "Medicare", Address: "ddadsdasd", ContactNumber: "1338872818738", NextOfKin: "weqe" },
    { Id: 3, FirstName: "Intwre", LastName: "zaiwoo", DateOfBirth: "2000/10/11", Gender: "Male", PrimaryInsurance: "Medicare", Address: "ddadsdasd", ContactNumber: "1338872818738", NextOfKin: "weqe" },
    { Id: 4, FirstName: "Niko", LastName: "baby", DateOfBirth: "2000/10/11", Gender: "Male", PrimaryInsurance: "Medicare", Address: "ddadsdasd", ContactNumber: "1338872818738", NextOfKin: "weqe" }
    ];

app.component.html：

<body><h1 class="title">patient datah1>
<p><a routerLink="/second">client-side weba> | <a routerLink="/third">admin-side weba>p><router-outlet>router-outlet>body>
`<table class="list-table">
    <thead>
      <th>Patient ID*th>
      <th>First name*th>
      <th>Last name*th>
      <th>Date of birth *th>
      <th>Gender*th>
      <th>Primary insurance*th>
      <th>Address *th>
      <th>Contact number *th>
      <th>Next of kinth>
    thead>
    <tbody>
      <tr *ngFor="let patient of Patient">
        <td>{{ patient.Id }}td>
        <td>{{ patient.FirstName }}td>
        <td>{{ patient.LastName }}td>
        <td>{{ patient.DateOfBirth }}td>
        <td>{{ patient.Gender }}td>
        <td>{{ patient.PrimaryInsurance }}td>
        <td>{{ patient.Address }}td>
        <td>{{ patient.ContactNumber }}td>
        <td>{{ patient.NextOfKin }}td>
        <td> <button class="button" (click)="del(patient.Id)">Removebutton>td>
         tr>
    tbody>
  table>

无论我点击哪个Remove按钮删除的都是最下面一行元素，我想当点击Remove按钮删除那个按钮所在一行的元素。
请问这个问题该怎么解决？

这里传入的是数字，del中的Patient.indexOf是对象，找不到对象返回-1，再splice(-1,1)就是最后一个

<td> <button class="button" (click)="del(patient.Id)">Remove</button></td>

直接传入对象

<td> <button class="button" (click)="del(patient)">Remove</button></td>

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632