Получить соответствующую строку кнопки, нажатой в таблице угловых материалов - PullRequest
0 голосов
/ 30 июня 2018

Как получить соответствующий ряд нажатых кнопок в таблице угловых материалов? Под строкой я имею в виду объект, в котором я могу видеть все значения всех ячеек строки.

Примерно так:

<ng-container matColumnDef="EditButtonCol">
  <th mat-header-cell *matHeaderCellDef>EditButtonCol</th>
  <td mat-cell *matCellDef="let element">
    <button mat-button (click)="onEdit(CORRESPONDING-ROW)">Edit</button>
  </td>
</ng-container>

Вот как это работает:

<tr mat-row *matRowDef="let row; columns: displayedColumns;" 
(mouseenter)="selection.select(row)" 
(mouseleave)="selection.deselect(row)"
[ngClass]="{ 'selected': selection.isSelected(row)}">
</tr>

Я использую свойство selection , чтобы установить строку в теге <tr>, когда наведу курсор на строку. И затем к тому времени, когда нажимается кнопка редактирования, устанавливается selection.selected prop, и я могу использовать его из машинописи

onEdit() {
console.log(this.selection.selected);
}

Но мне не нравится этот способ, потому что, если пользователь переходит к кнопке «редактировать» с помощью кнопки «вкладка» и нажимает клавишу ввода - он получит неверную строку или неопределенное значение, потому что зависание никогда не происходило.

Ответы [ 2 ]

0 голосов
/ 30 июня 2018

Это работает

<button mat-button (click)="onEdit(element)">Edit</button>
0 голосов
/ 30 июня 2018

Попробуйте, основываясь на моей рабочей настройке. Я уверен в элементе, но ряд работает. В этом столбце есть три кнопки для работы с информацией об участнике.

Пример Stackblitz

    <ng-container matColumnDef="EditButtonCol">
      <th mat-header-cell *matHeaderCellDef> EditButtonCol </th>
      <td mat-cell *matCellDef="let row">
        <button mat-button (click)="viewProfile(row.member_id)">View</button>
        <button mat-button (click)="deleteRecord(row.member_id)">Delete</button>
        <button mat-button (click)="editRecord(row.member_id)">Edit</button>
      </td>
    </ng-container>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...