面板打开时在 mat 选项中显示额外值

Question

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

我想在 mat 选项行中显示附加值并在选择后隐藏该附加值。是否有可能使用 panelOpen，在此先感谢。

Answer 1

如果您使用 # 符号将 mat-select 声明为变量，则可以将 ngIf 更改为 mySelect.panelOpen，其中 mySelect 是您提供的 ID mat-select:

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

这里是a StackBlitz。

面板打开时在 mat 选项中显示额外值

Show extra values in mat option when panel is open

select

angular-material

options