如何找到mat-table的索引并执行功能

Question

我有一个席子表，它在席子表中显示匹配的客户记录。 在mat-table旁边，我有3个按钮View，Edit和Delete。 HTML代码

  // Edit function editCustomer(element) { this.transferServiceService.setData(element.id); this.router.navigateByUrl('/edit'); } // Delete function deleteCustomer(element) { this.customer360Service.deleteCustomer(this.customerId).subscribe( data => { console.log(data); console.log(this.customerId); this.snackbar.open('Customer Deleted Successfully', 'Close', { duration: 3000 }); }, err => { console.log('***', this.customerId); this.snackbar.open('Failed To Delete Customer', 'Close', { duration: 3000 }); } ); } 

 <!-- Table for Individual Customer --> <div class="table-container mat-elevation-z8" *ngIf="showIndTable"> <mat-table [dataSource]="customerSearchRecordList" matSort> <ng-container matColumnDef="index"> <mat-header-cell *matHeaderCellDef> Number </mat-header-cell> <mat-cell *matCellDef="let element; let i = index">{{ i + 1 }}</mat-cell> </ng-container> <!-- Customer Id Column --> <ng-container matColumnDef="id"> <mat-header-cell *matHeaderCellDef>Customer Id</mat-header-cell> <mat-cell *matCellDef="let element">{{ element.id }}</mat-cell> </ng-container> <!-- First Name Column --> <ng-container matColumnDef="firstName"> <mat-header-cell *matHeaderCellDef>First Name</mat-header-cell> <mat-cell *matCellDef="let element">{{ element.individualCustomer.primaryFirstName }}</mat-cell> </ng-container> <!-- Last Name Column --> <ng-container matColumnDef="lastName"> <mat-header-cell *matHeaderCellDef>Last Name</mat-header-cell> <mat-cell *matCellDef="let element">{{ element.individualCustomer.primaryLastName }}</mat-cell> </ng-container> <!-- Date of birth Column --> <ng-container matColumnDef="dateOfBirth"> <mat-header-cell *matHeaderCellDef>Date Of Birth</mat-header-cell> <mat-cell *matCellDef="let element">{{ element.individualCustomer.dateOfBirth | date: 'MM/dd/yyyy' }}</mat-cell> </ng-container> <!-- Gender Column --> <ng-container matColumnDef="gender"> <mat-header-cell *matHeaderCellDef>Gender</mat-header-cell> <mat-cell *matCellDef="let element">{{ element.individualCustomer.gender }}</mat-cell> </ng-container> <!-- City Column --> <ng-container matColumnDef="city"> <mat-header-cell *matHeaderCellDef>City</mat-header-cell> <mat-cell *matCellDef="let element">{{ element.address[0].city }}</mat-cell> </ng-container> <!-- Status Column --> <ng-container matColumnDef="status"> <mat-header-cell *matHeaderCellDef>Status</mat-header-cell> <mat-cell *matCellDef="let element" [ngClass]="{ positive: element.status == 'Active', negative: element.status == 'In Active' }" >{{ element.status }}</mat-cell > </ng-container> <!-- View Button --> <ng-container matColumnDef="actions"> <mat-header-cell *matHeaderCellDef> Actions </mat-header-cell> <mat-cell *matCellDef="let element; let index = index"> <smd-fab-speed-dial [open]="open" [direction]="direction" [animationMode]="animationMode" [fixed]="fixed"> <smd-fab-trigger [spin]="true"> <button color="black" matTooltip="More job actions ..." class="view-data" mat-fab (click)="moreActionToggle()"> <i class="material-icons">more_horiz</i> </button> </smd-fab-trigger> <smd-fab-actions> <button mat-mini-fab color="#b71c1c" matTooltip="View" (click)="transferIndCustData(element)"> <i class="material-icons large" style="font-size: 20px"> pageview </i> </button> <button mat-mini-fab color="#b71c1c" matTooltip="Edit" (click)="editCustomer(element)"> <i class="material-icons large" style="font-size: 20px"> edit </i> </button> <button mat-mini-fab color="#b71c1c" matTooltip="Delete" (click)="deleteCustomer(element)"> <i class="material-icons large" style="font-size: 20px"> delete </i> </button> </smd-fab-actions> </smd-fab-speed-dial> </mat-cell> </ng-container> <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row> <mat-row *matRowDef="let row; columns: displayedColumns; let i = index"></mat-row> </mat-table> <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator> </div> 

我的问题是如果有一行，那么我可以删除或编辑客户记录，但是如果有多行，那么我希望能够删除我单击的索引的记录

Answer 1

代替this.customer360Service.deleteCustomer(this.customerId)

把这个this.customer360Service.deleteCustomer(element.id)