Angular 角度垫选择显示的选项数

我有一个

mat select

元素，该元素具有固定数量的

mat选项

元素。要查看最后一个元素，我必须滚动列表。是否可以扩展区域，以便在不滚动的情况下查看最后一个元素

<mat-form-field appearance="outline">
    <mat-select>
        <mat-option [value]="0">Automatically</mat-option>
        <mat-option [value]="10">10</mat-option>
        <mat-option [value]="20">20</mat-option>
        <mat-option [value]="50">50</mat-option>
        <mat-option [value]="100">100</mat-option>
        <mat-option [value]="-1">All</mat-option>
    </mat-select>
</mat-form-field>

及

.mat选择面板{
最大高度：
}

---

在与组件相关的.scss文件中

将ViewEncapsulation.None添加到，并添加CSS以自定义mat选择

@Component({
  selector: 'select-value-binding-example',
  templateUrl: 'select-value-binding-example.html',
  styleUrls: ['select-value-binding-example.css'],
  encapsulation: ViewEncapsulation.None
})

将此css属性添加到.mat选择面板

.mat-select-panel{
  overflow:visible !important;
}

---

检查此示例：

如果您有固定数量的选项，最干净的方法是猜测您需要多少高度，以及：

::ng-deep() .mat-select-panel {
    max-height: <your new height>
}

：：ng-deep（）.mat选择面板{
最大高度：
}

---

这样，选择框将清晰地显示所有边框阴影，并且所有垫选择器选项都显示在不是组件子级的覆盖div中。需要在styles.scss中全局更改样式。 因此，请添加您的styles.scss：

.mat选择面板{
最大高度：600px！重要；
}

谢谢，当我把它放在global styles.scs中时，它就起作用了。是否可以在单个组件中使用此功能？我已经尝试过了，但没有成功。您必须将ViewEncapsulation模式更改为

None

，或者在css选择器运行之前添加

：：ng-deep（）

，仅此而已！

.mat-select-panel{
  overflow:visible !important;
}

::ng-deep() .mat-select-panel {
    max-height: <your new height>
}