mat-select：如何不滚动显示所有选项？

Question

当我有5个以上的选项时，我想禁用滚动条：

代码：

https://stackblitz.com/edit/angular-select-size?file=app/select-overview-example.html

演示：

https://angular-select-size.stackblitz.io

我尝试使用“大小”选项，但是我发现该选项不可用：

<mat-option ng-size=8 *ngFor="let food of foods" [value]="food.value">
  {{food.viewValue}}
</mat-option>

Answer 1

将此代码添加到您的global styles.css

.my-select.mat-select-panel{
  max-height: none!important;
}

在mat-select组件中包括panelClass =“ my-select”属性。

Answer 2

您可以编辑选择面板的高度。

将此代码添加到您的styles.css

.mat-select-panel {
  max-height: 400px !important;
}

数字400px是一个随机数。如果您的数据太多，则必须添加一个更大的数字。

https://stackblitz.com/edit/angular-select-size-8vkutp

Answer 3

将此代码添加到您的styles.css

.mat-select-panel{
   max-height: none!important;
}

Answer 4

先前的答案对我而言并不直接有效，我需要::ng-deep（不推荐使用/deep/，请参见-What do /deep/ and ::shadow mean in a CSS selector?）

即

::ng-deep .mat-select-panel {
  max-height: none !important;
}

::ng-deep .mat-select-panel {
  max-height: 400px!important;
}