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 data</h1>
<p><a routerLink="/second">client-side web</a> | <a routerLink="/third">admin-side web</a></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 kin</th>
</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)">Remove</button></td>
</tr>
</tbody>
</table>
无论我点击哪个Remove按钮删除的都是最下面一行元素，我想当点击Remove按钮删除那个按钮所在一行的元素。
请问这个问题该怎么解决？
