Событие нажатия кнопки в MatTable не работает - PullRequest
Новая
       54

Событие нажатия кнопки в MatTable не работает

0 голосов
/ 20 июня 2020

Я новичок в Angular Material и реализую MatTable, получая данные из Firebase (базы данных реального времени). Для каждой строки MatTable мне нужна кнопка для удаления определенных данных строки по ее ключу $. MatTable, выборка данных и кнопка отображаются правильно. Когда кнопка нажата, она не вызывает функцию удаления, указанную в событии щелчка.

  • Angular 8,2
  • Angular Материал 8.2.3
  • Firebase 7.14.1
  • Машинопись 3.5.3

HTML код для MatTable 

<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;
  });
  }

1 Ответ

0 голосов
/ 21 июня 2020

Я думаю, проблема в том, как вы отправляете элемент в функцию.

Вот пример того, как я реализовал щелчок - удаление.
В файле 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 ...>
...