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

Question

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

• Angular 8.2
• Angular 材质 8.2.3
• Firebase 7.14.1
• Typescript 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
  }

Details是接口，元素的类型。 顺便说一句，你可能想看看这个链接https://material.angular.io/components/table/overview， 而不是例如

<mat-table ...>

你应该使用

<table mat-table ...>