如何设置Mat-Autocomplete中的项目数

Question

我现在试图在一段时间内更改Mat-Autocomplete中的项目数，而不会成功。我正在使用材料。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>

从文档中，我了解到自动完成面板的恒定高度为256px（https://material.angular.io/components/autocomplete/autocomplete/api#autocomplete_panel_height）。

我的问题是：如何更改自动完成面板以显示更多项目。假设10.如果没有打算这样做的方法，有人可以给我一个提示CSS技巧来设定高度的技巧，例如到512px而不是默认的256px？

非常感谢！

Answer 1

您可以通过覆盖这样的最大高度来更改自动完成面板的高度：

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

在此处看到它。