С таблицами Angular Material, как иметь обработчик события щелчка для строки таблицы, которая игнорирует один столбец - PullRequest
Новая
       15

С таблицами Angular Material, как иметь обработчик события щелчка для строки таблицы, которая игнорирует один столбец

0 голосов
/ 05 сентября 2018

В моей таблице угловых материалов есть строка, на которую я хочу кликнуть. Проблема в том, что у меня также есть значок в последнем столбце строки, который я также хочу, чтобы он был кликабельным, но обрабатывался по-другому. Прямо сейчас, когда я нажимаю на значок, он вызывает оба обработчика, и я не хочу этого. Вот мой код: 

<div class="mat-elevation-z8">
  <table mat-table #table [dataSource]="dataSource" matSort aria-label="Publisher">

    <!-- LastName Column -->
    <ng-container matColumnDef="lastName">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Last Name</th>
      <td mat-cell *matCellDef="let row">{{row.lastName}}</td>
    </ng-container>

    <!-- FirstName Column -->
    <ng-container matColumnDef="firstName">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>First Name</th>
      <td mat-cell *matCellDef="let row">{{row.firstName}}</td>
    </ng-container>

    <!-- Actions -->
    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let row">
        <button mat-icon-button (click)="onClickDelete(row.id)">
          <mat-icon>delete</mat-icon>
        </button>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row (click)="onClickPublisher(row.id)" *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

  <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>

Как сделать так, чтобы при нажатии на значок delete он не вызывал обработчик щелчков для всей строки?

Ответы [ 2 ]

0 голосов
/ 19 апреля 2019

У меня была похожая проблема, я хотел показать всплывающее окно при щелчке значка из таблицы. Вот мой обходной путь:

HTML 

<ng-container matColumnDef="delete">
    <mat-header-cell *matHeaderCellDef> Delete </mat-header-cell>
    <mat-cell *matCellDef="let element">
        <button mat-button (click)="showAlert(element)">
            <i class="material-icons">delete_forever</i>
        </button>
    </mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectedRows(row)"></mat-row>
</mat-table>

ц

... 

public isClicked = false;

... 

showAlert(action) {
    this.isClicked = true;

    //this open popup
    swal({
        //popup part
    }).then(isConfirm => {
        this.isClicked = false;
    }, (dismiss) => {
        if (dismiss === 'cancel' || dismiss === 'close') {
            this.isClicked = false;
        } 
    });
}

, а затем просто проверьте, нажата ли иконка 

selectedRows(row){
    if(!this.isClicked){
        //do what ever you want icon is not clicked
    }
}
0 голосов
/ 05 сентября 2018

Вот пара вещей, которые могут помочь:

Передайте событие click вместе с идентификатором в код бэкэнда следующим образом: 

<button mat-icon-button (click)="onClickDelete($event, row.id)">
      <mat-icon>delete</mat-icon>
</button>

Тогда вы можете поймать его в тс. На значке вы можете попробовать остановить распространение, как это: 

onClickDelete(e, id) {
    e.stopPropagation();
   // do stuff with the id;
}

В строке можно проверить список классов целей: 

onClickDelete(e, id) {
   if (e.target.className.includes('mat-icon-button')) {
       return;
   }
   //Do stuff with id
}
...