Как установить количество элементов в mat-autocomplete

Question

Я сейчас пытаюсь изменить количество элементов в мат-автозаполнении некоторое время безуспешно.Я использую material.angular.io

Вот мой код

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-add-and-search',
  templateUrl: './add-and-search.component.html',
  styleUrls: ['./add-and-search.component.css']
})
export class AddAndSearchComponent implements OnInit {

  items: string[] = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];

  constructor() { }

  ngOnInit() {
  }

}

<mat-form-field appearance="standard">
  <mat-label>Search...</mat-label>
  <input matInput placeholder="Search..." [matAutocomplete]="auto">
  <mat-icon matSuffix>search</mat-icon>
</mat-form-field>

<mat-autocomplete #auto="matAutocomplete">
  <mat-optgroup label="Items">
    <mat-option *ngFor="let item of items" [value]="item">{{item}}</mat-option>
    <mat-option><mat-icon>add</mat-icon>Add</mat-option>
  </mat-optgroup>
</mat-autocomplete>

Из документов я узнал, что панель автозаполнения имеет постоянную высоту 256 пикселей (https://material.angular.io/components/autocomplete/api#AUTOCOMPLETE_PANEL_HEIGHT).

Мой вопрос: как я могуизмените панель автозаполнения, чтобы отображать больше элементов. Скажем, 10. Если нет никакого намеренного способа сделать это, может кто-нибудь дать мне подсказку по трюку CSS, чтобы установить высоту, например, 512px вместо 256px по умолчанию?

Большое спасибо!

Answer 1

Вы можете изменить высоту панели автозаполнения, переписав max-height следующим образом:

::ng-deep .mat-autocomplete-panel {
 max-height: 512px !important; 
}

Смотрите это в действии здесь .