我们可以使用CSS的"panelClass"特性来解决Angular Material中的选择组件滚动问题。我们需要设置一个最大高度和一个overflow属性,如下所示:
HTML代码:
5 }" panelClass="scroll-select-panel">
{{item.label}}
CSS代码:
.scroll-select-panel {
max-height: 250px;
overflow-y: auto !important;
}
在CSS代码中,我们将 .scroll-select-panel 的最大高度设置为250像素,并将溢出设置为自动。另外,我们还定义了 .scroll-select 的类,在筛选器中通过使用ngClass来自动添加到选择组件中,这将告诉我们在items的数量超过5时,需要应用滚动特性。
最后,我们需要将我们的CSS样式应用于整个应用程序,我们将其添加到样式表中:
@import "node_modules/@angular/material/prebuilt-themes/indigo-pink.css";
.scroll-select {
width: 100%;
}
.scroll-select-panel {
max-height: 250px;
overflow-y: auto !important;
}
这样我们就可以成功地解决Angular Material中的选择组件滚动问题了。