Angular 停止从溢出屏幕外选择角材料垫

我将根据以下示例向我的angular应用程序添加mat select：

但是，我不喜欢此选择的一点是，如果我选择一个值并重新打开以选择另一个选项，列表将与所选选项对齐，并且我的列表的一半可能在屏幕上实际选择器所在位置的上方和下方

我已经阅读了angular material文档，但看不到覆盖此默认值的任何选项。有没有什么方法我没有做到这一点，或者有没有人有任何css示例来说明如何做到这一点？或者，从UI的角度来看，我为什么不应该覆盖它

---

谢谢

我在选择“溢出屏幕”时遇到了类似的问题，并使用MatSelect的

panelClass

属性帮助解决了这个问题

我用它来设置

最大高度

my.component.html

<mat-form-field class="form-fields">
      <mat-select matNativeControl
                  panelClass="max-height" <!-- see this here  -->
                  placeholder="Task"
                  (selectionChange)="validate()"
                  [formControl]="task">
        <mat-option *ngFor="let task of tasks"
                    [value]="role.code">{{ role.name }}</mat-option>
      </mat-select>     
</mat-form-field>

---

这为我解决了这个问题。

我遇到了一个类似的问题，即选择“溢出屏幕”，并使用MatSelect的

panelClass

属性来帮助解决这个问题

我用它来设置

最大高度

my.component.html

<mat-form-field class="form-fields">
      <mat-select matNativeControl
                  panelClass="max-height" <!-- see this here  -->
                  placeholder="Task"
                  (selectionChange)="validate()"
                  [formControl]="task">
        <mat-option *ngFor="let task of tasks"
                    [value]="role.code">{{ role.name }}</mat-option>
      </mat-select>     
</mat-form-field>

这就为我解决了问题