我有一个垫子桌,它在垫子桌上显示匹配的客户记录。在Matable旁边,我有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>
我的问题是,如果有一行,那么我可以删除或编辑客户记录。但是,如果有多个行,那么我希望能够删除索引的记录,我单击
而不是 this.customer360Service.deleteCustomer(this.customerId)
放这个this.customer360Service.deleteCustomer(element.id)