javascript - 如何找到mat-table的索引并执行函数

Question

我有一个 mat-table，它在 mat-table 中显示匹配的客户记录。在 mat-table 旁边有 3 个按钮“查看”、“编辑”和“删除”。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)