Angular Материал - отображение Mat-Menu при наведении курсора мыши, только если условие выполнено

Question

быстрый вопрос. Я хочу вызвать Mat-menu при наведении указателя мыши на элемент div с заголовком моего компонента, но только в том случае, если для какого-то определенного условия c установлено значение true.

У меня есть что-то вроде этого:

<div class="card-header"
     [matMenuTriggerFor]="comp.RejectionDetails ? rejectionDetails : null" 
     #trigger="matMenuTrigger" (mouseenter)="trigger.openMenu()" 
     (mouseleave)="trigger.closeMenu()">
  <mat-menu #rejectionDetails [class]="'mat-menu-component'"
            [hasBackdrop]="false">
      <ng-template matMenuContent>
           <div>TEST</div>
      </ng-template>
  </mat-menu>

Кажется, что работает должным образом, но в консоли выдает ошибку:

UniversalDynamicComponent. html: 10 Ошибка: matMenuTriggerFor: должна передаваться в экземпляре mat-menu.

Example:
  <mat-menu #menu="matMenu"></mat-menu>
  <button [matMenuTriggerFor]="menu"></button>

Я понимаю, что это из-за передачи нулевого значения в директиву (когда условие ложно). Но я не могу найти другое решение этой проблемы. Может быть, кто-то может помочь? Спасибо!

Answer 1

Попробуйте установить ваше условие не на [matMenuTriggerFor], а на событие (mouseenter), например:

 [matMenuTriggerFor]="rejectionDetails" 
 (mouseenter) = "comp.RejectionDetails ? trigger.openMenu() : null"