У меня есть mat-menu внутри kendoGridCellTemplate , где элементы меню создаются ngFor .
Это меню отображается правильно, но как только мы нажимаем, оно не закрывается .
Если я использую Chrome Инспектор для перехода к этому элементу, его нет в DOM.
<kendo-grid-column *ngIf="shouldCreate" title="Menu">
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
<mat-menu #actionMenu="matMenu" [overlapTrigger]="false">
<div class="action-menu">
<a *ngFor="let actionitem of Items;let mi=index"
[ngClass]="{'border-top':actionitem.HasSeperator}"
ng-click='ActionItemClicked(actionitem.MenuTitle,dataItem)'>
<mat-icon>{{actionitem.MenuIcon}}</mat-icon>
{{actionitem.MenuTitle}}
</a>
</div>
</mat-menu>
<button mat-icon-button [matMenuTriggerFor]="actionMenu">
<mat-icon>more_vert</mat-icon>
</button>
</ng-template>
</kendo-grid-column>
Любая идея, что здесь пошло не так.
Даже простая реализация не работает, т.е. меню не закрывается, вот код:
<kendo-grid-column title="Menu Test">
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
</ng-template>
</kendo-grid-column>
Код меню скопирован с Страница угловых материалов