Angular 7 + Angular 材质。如何在扩展垫菜单下拉菜单上切换图标？

Question

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

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

正如您所看到的{{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>