Как получить доступ к элементу popover с повторным именем внутри компонента?

Question

Я пытаюсь вызвать функцию переключения поповера внутри угловой таблицы материалов.

Если ячейка в таблице имеет фокус с вкладками, я бы хотел, чтобы всплывающее окно открывалось, когда пользователь нажимал клавишу «Ввод». Это имитирует поведение, когда пользователь нажимает на ячейку таблицы.

Моя проблема в том, что компоненту popover присвоено имя #valuePopover, которое является одинаковым именем для всех ячеек в таблице.

<ng-container matColumnDef="value">
  <th mat-header-cell *matHeaderCellDef> Value </th>
  <td mat-cell *matCellDef="let entry;" tabindex="0"
    [satPopoverAnchorFor]="valuePopover" (click)="valuePopover.toggle()" 
    (keypress)="openPopover($event)">
    <span>{{entry.value}}</span>
    <sat-popover #valuePopover hasBackdrop xAlign="start" yAlign="start" (closed)="updateField(entry, $event)">Hello!
    </sat-popover>
  </td>
</ng-container>

Для события (click) он работает нормально, так как он может просто вызвать функцию 'valuePopover.toggle ()'. Однако в случае события нажатия клавиши мне нужно проверить, была ли нажата клавиша ввода, и мне нужно сделать это в компоненте.

@ViewChild('valuePopover') popover; 

openPopover(event: KeyboardEvent) {
  if(event.keyCode == 13) popover.toggle();
}

Функция openPopover всегда открывает всплывающее окно первого всплывающего окна ячейки, но не всплывающее окно с фокусом на вкладках!

Кто-нибудь знает, как я могу реализовать это либо в HTML или компоненте?

Я использую компонент 'sat-popover', который вы можете найти здесь: https://github.com/ncstate-sat/popover

Answer 1

Я решил эту проблему с помощью пользователя Diodeus - Джеймса Макфарлана, предотвратив событие по умолчанию и вызвав метод click для event.target следующим образом:

openPopover(event) {
  if(event.keyCode == 13) {
    event.preventDefault();
    var element:HTMLElement = event.target;
    element.click();
  }
}