Angular mat-选择显示选项的数量

Question

我有一个mat-select具有固定数量mat-option元素的元素。要查看最后一个元素，我必须滚动列表。是否可以扩大该区域，以便我可以在不滚动的情况下看到最后一个元素？

<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>

[我拥有的]

[我想要的是]

提前致谢！

解决方案：

我最终是这样解决的：

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

和

.mat-select-panel{
  max-height: <your new height>
}

在组件相关的 .scss 文件中

Answer 1

添加 ViewEncapsulation.None 并添加 css 来自定义您的 mat-select

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

将此 css 属性添加到您的 .mat-select-panel

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

检查此示例： https: //stackblitz.com/edit/angular-swkgk4