MatTable 中按钮的点击事件不起作用

Question

我是Angular Material的新手，并且一直在通过从Firebase(实时数据库(获取数据来实现MatTable。对于 MatTable 的每一行，我需要一个按钮来按其$key删除行的特定数据。MatTable，获取数据和按钮正确显示。只是单击按钮时，它不会调用单击事件中给出的删除函数。

• 角度 8.2
• 角材料 8.2.3
• 火力基地 7.14.1
• 打字稿 3.5.3

MatTable 的 HTML 代码

<mat-table [dataSource]="listData" matSort>
<ng-container matColumnDef="key">
<mat-header-cell *matHeaderCellDef >key</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.$key}}</mat-cell>
</ng-container>
<ng-container matColumnDef="studentPRN">
<mat-header-cell *matHeaderCellDef >PRN</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.leaveStudentPRN}}</mat-cell>
</ng-container>
<ng-container matColumnDef="studentName" >
<mat-header-cell *matHeaderCellDef >Name</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.leaveStudentName}}</mat-cell>
</ng-container>
<ng-container matColumnDef="studentClass">
<mat-header-cell *matHeaderCellDef>Class</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.leaveStudentClass}}</mat-cell>
</ng-container>
<ng-container matColumnDef="startDate">
<mat-header-cell *matHeaderCellDef mat-sort-header>Start Date</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.leaveStartDate}}</mat-cell>
</ng-container>
<ng-container matColumnDef="endDate">
<mat-header-cell *matHeaderCellDef mat-sort-header>End Date</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.leaveEndDate}}</mat-cell>
</ng-container>
<ng-container matColumnDef="leaveType">
<mat-header-cell *matHeaderCellDef>Type</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.leaveType}}</mat-cell>
</ng-container>
<ng-container matColumnDef="leaveDescription">
<mat-header-cell *matHeaderCellDef>Description</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.leaveDescription}}</mat-cell>
</ng-container>
<ng-container matColumnDef="leaveTeacher">
<mat-header-cell *matHeaderCellDef>Requested to</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.leaveTeacher}}</mat-cell>
</ng-container>
<ng-container matColumnDef="leaveStatus">
<mat-header-cell *matHeaderCellDef>Status</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.leaveStatus}}</mat-cell>
</ng-container>
<ng-container matColumnDef="action">
<mat-header-cell *matHeaderCellDef>Action</mat-header-cell>
<mat-cell *matCellDef="let row">
<button  mat-icon-button color="warn" (click)="withdrawLeave(row.$key)"> 
<mat-icon>delete_outline</mat-icon></button>
</mat-cell>
</ng-container>
<ng-container matColumnDef="loading">
<mat-footer-cell *matFooterCellDef colspan="6">Fetching data...</mat-footer-cell>
</ng-container>
<ng-container matColumnDef="noData">
<mat-footer-cell *matFooterCellDef colspan="6">No data found.</mat-footer-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayColumns"></mat-header-row>
<mat-row *matRowDef="let rows; columns: displayColumns;"></mat-row>
<mat-footer-row *matFooterRowDef="['noData']" [ngClass]="{'hide':listData!=null}"></mat-footer-row>
<mat-footer-row *matFooterRowDef="['loading']" [ngClass]="{'hide':!(listData!=null && listData.data.length==0)}"></mat-footer-row>
</mat-table>
<mat-paginator [pageSizeOptions]="[5,10,20,30]" [pageSize]="5" showFirstLastButtons></mat-paginator>

按钮单击事件的打字稿

withdrawLeave($key){
if(confirm("Do you want to withdraw the leave request?")){
this.auth.withdrawLeave($key);
}

身份验证服务

leaveList : AngularFireList<any>;
getLeaves(){
this.leaveList = this.firebase.list('Leaves');
return this.leaveList.snapshotChanges();
}
withdrawLeave($key: string){
this.leaveList.remove($key);
}

用于将数据提取到 MatTable 中的打字稿

setAppliedLeaves(){
this.auth.getLeaves().subscribe(list => {
let array = list.map(item => {
return {
$key: item.key,
...item.payload.val()
};
});
this.listData = new MatTableDataSource(array);
this.listData.sort = this.sort;
this.listData.paginator = this.paginator;
});
}

Answer 1

我认为问题在于您将元素发送到函数的方式。

以下是我如何实现点击 - 删除的示例。
在 html 文件中：

<ng-container matColumnDef="columndelete">
<th mat-header-cell *matHeaderCellDef>Delete</th>
<td mat-cell *matCellDef="let element">
<h5 (click)="delete(element)"><i class="fa fa-trash"></i>
</h5>
</td>
</ng-container>

在 TS 文件中：

delete(elm: Details) {
//logic
}

细节是界面，是元素的类型。 顺便说一句，您可能想 https://material.angular.io/components/table/overview 查看此链接， 而不是例如

<mat-table ...>

你应该使用

<table mat-table ...>