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

добавить этот код вам styles.css

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

Answer 2

Предыдущие ответы не работали напрямую для меня, и мне нужно было ::ng-deep (/deep/ устарело, см. - Что означают / deep / и :: shadow в селекторе CSS? )

т.е.

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

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

Answer 3

Вы можете редактировать высоту выбранной панели.

Добавьте этот код к вашему styles.css

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

Число 400px является случайным.Если ваших данных слишком много, вы должны добавить большее число.

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