Как условно добавить [matMenuTriggerFor] в mat-меню

#angular #angular-material

#angular #angular-материал

Вопрос:

У нескольких #menu элементов нет дочернего элемента. Но показывает стрелку, которая указывает на наличие подменю. Что неверно. Как добавлять [matMenuTriggerFor]="subMenu" только при наличии элементов в подменю.

 <mat-menu #menu="matMenu">
    <ng-container *ngFor="let item of menuItem.items; let i=index"> 
        <button class="mat-menu-item" mat-menu-item
            [routerLink]="item.routerLink" routerLinkActive="active" [matMenuTriggerFor]="subMenu"> {{item.name}}
        </button>
        <mat-menu #subMenu="matMenu"> <button class="mat-sub-menu-item"
                *ngFor="let subitem of menuItem.items[i].subitems" mat-menu-item> {{ subitem.name }} </button>
        </mat-menu>
    </ng-container>
</mat-menu>

1. просто предположение: [matMenuTriggerFor]=»MenuItems. длина > 0 ? подМеню: null»

2. элементы подменю являются частью массива MenuItem.items[i].subitems.

3. [{ «id»: «1», «name»: «Клиенты», «icon»: «perm_identity», «items»: [{ «name»: «Управление клиентами», «routerLink»: «/ Объект / Контакт», «подпункты»: [{ «name»: «Вспомогательный клиент 1» }]}, { «name»: «Управление учетными записями», «routerLink»: «/ Объект / Учетная запись» } ] }]

4. конечно, это был просто пример. menuItems может быть любой var

5. да, конечно .. Но [matMenuTriggerFor]=»item.subitems. длина > 0 ? подМеню: null» также не работает.

Ответ №1:

Функциональность для реализации условного [matMenuTriggerFor] реализована и будет представлена в следующих версиях angular:https://github.com/angular/components/commit/856c01639fbf968cb33885807ffaf6d3f3bf5423

До тех пор я использую следующий обходной путь:

HTML

 <button [matMenuTriggerFor]="condition ? menu : placeholder"/><button>
<mat-menu #placeholder="matMenu" class="placeholder"></mat-menu>

CSS

 .placeholder {
  display: none;
}

В вашем случае условные стили, чтобы скрыть стрелку.

1. Обратите внимание, что кто-либо еще находит это, который пытается сократить ответ Карла, как я сделал! Вы не можете применить класс условно — он не будет повышен до overlay (который использует Menu). Аналогично вы не можете сделать, [style.display]="condition ? 'none' : null" и, наконец, .placeholder класс должен быть объявлен глобально (фактически вы можете использовать ::ng-deep { .placeholder { display: none; } } в компоненте для достижения этого.

2. Это решение сохранит меню открытым в фоновом режиме, что не позволит пользователю нажимать на другие элементы.

Ответ №2:

Мое решение — сделать другой ng-шаблон для случаев, когда есть подменю.

Чтобы передать

   [matMenuTriggerFor]="somecondition? subMenu: null"

В любом случае, в какой-то версии будет генерироваться ошибка.

например:

  <a *ngIf="conditionForNoSubMenu; else submenuItem">My buttons...</a>

    <ng-template #submenuItem>
      <a
        [matMenuTriggerFor]=" subMenu"
      >My Buttons.... 
        <mat-menu #subMenu="matMenu">
          my sub buttons.... 
        </mat-menu>
      </a>

    </ng-template>

Ответ №3:

Для angular версии 14 и выше вы можете передать значение null [matMenuTriggerFor]="condition ? menu : null

Для версий ниже я использовал *ngIf дважды, одну с [matMenuTriggerFor]="menu" и одну без него.

 <span *ngIf="condition" class="clickable" [matMenuTriggerFor]="menu">click for menu</span>
<span *ngIf="!condition">click for nothing</span>

Ответ №4:

Решена эта проблема путем добавления *ngIf=»MenuItem.items[i].subitems» к кнопке

 <button class="mat-menu-item" [class.more-menu-item]="menuItem.name=='More'"  mat-menu-item  [routerLink]="item.routerLink"
        routerLinkActive="active" [matMenuTriggerFor]="subMenu"><span class="pm-menu-item">{{item.name}}</span><i class="material-icons pm-menu-icon-right" *ngIf="menuItem.items[i].subitems">keyboard_arrow_right</i>
 </button>

1. Это решило вашу проблему, что является победой для вас, но не отвечает на исходный вопрос, поэтому вряд ли это поможет другим, которые найдут это. Было бы неплохо увидеть ответ или хорошее обходное решение для случаев, когда целевой элемент должен оставаться видимым, но отвечать меню только условно.