kendo ui 网格 angular 5 mat-menu 未在 kendoGridCellTemplate 中关闭

Question

我在 kendoGridCellTemplate 中有一个 mat-menu，其中菜单项由 ngFor[=32= 创建].

此菜单显示正确，但一旦我们单击它未关闭。

如果我使用 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>

菜单代码复制自Angular Material Page

Answer 1

终于找到问题所在了。对于自动调整列宽，我使用的函数 grid.autoFitColumn() 导致了这个问题，一旦删除问题就解决了。 但我仍然需要查看导致此问题的 autoFitColumn 中的内容。