如何在mat-select面板打开时为mat-option展示额外值并在选中后隐藏

完全可以通过mat-select自带的panelOpen属性实现该需求，你之前的写法只差绑定到mat-select实例这一步，具体实现如下：

调整后代码 #

<mat-select #selectRef="matSelect">
  <mat-option *ngFor="let i of List" [value]="i.value">
    {{i.viewValue}}<span *ngIf="selectRef.panelOpen">{{i.viewValue2}}</span>
  </mat-option>
</mat-select>

实现说明 #

• 给<mat-select>添加模板引用变量#selectRef="matSelect"，就能直接读取Angular Material内置的matSelect实例属性
• panelOpen是实例原生的只读布尔值：下拉面板展开时为true，额外字段正常展示；选中选项后面板自动关闭，值变为false，额外字段自动隐藏，完全符合你的需求。

特殊场景说明 #

如果是开启multiple多选属性的场景，选中选项后默认不会自动关闭面板，若需要选中后立刻隐藏额外字段，可以自行监听selectionChange事件维护自定义状态控制显示隐藏，单选场景下上述代码可以直接生效。

内容的提问来源于stack exchange，提问作者noiissyboy