角度7 +角度材质。 如何在扩展的菜单下拉菜单中切换图标？

Question

我在扩展<mat-menu>上切换图标时遇到问题。
为了扩展下拉菜单，我使用了[matMenuTriggerFor]="menu" 。
当我在下拉菜单之外单击时，下拉菜单会扩展并隐藏。

问题：
我不能找出如何可以切换<mat-icon>expand_more</mat-icon>到<mat-icon>expand_less</mat-icon>时显示下拉菜单，并以相反的方式，当下拉是隐藏的。
我注意到显示下拉列表时，我的一个div上存在[aria-expanded]="true"属性。 整个属性在关闭下拉列表中消失。
您能帮我实现下拉菜单上的切换图标吗？

如您所见，在{{iconExpand}}插值中，我想在切换下拉菜单中提供图标名称。

<div class="NavbarUser" #menuTrigger="matMenuTrigger" [matMenuTriggerFor]="menu">
  <tl-mat-button [noPadding]="true" [colorTheme]="'linkGrey'"
  class="NavbarUserName tl-mat-padding-r-base">
    {{ input.user.fullName }}
  </tl-mat-button>
  <tl-mat-image-thumbnail [size]="'small'" [thumbnailUrl]="input.user.thumbnailUrl">
  </tl-mat-image-thumbnail>

  <mat-icon class="Profile__DropdownArrow--Icon">{{iconExpand}}</mat-icon>
  <mat-menu #menu="matMenu">
    <div>
      <hr/>
    </div>
    <button mat-menu-item *ngFor="let profileButton of input.dropDownPaths"
    [routerLink]="profileButton.relativeUrl">
      <img class="Profile__Dropdown--Icons" src="{{profileButton.iconUrl}}" />
      <span class="Profile__Dropdown--Text">{{profileButton.title}}</span>
    </button>
  </mat-menu>
</div>

Answer 1

只需检查menuOpen属性：

<div #menuTrigger="matMenuTrigger" [matMenuTriggerFor]="menu">
  <mat-icon>
    {{menuTrigger.menuOpen ? 'expand_less' : 'expand_more'}}
  </mat-icon>
</div>