如何查找mat-table索引并执行函数

Question

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

​

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

Answer 1

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

将此this.customer360Service.deleteCustomer(element.id)