如何在 mat-autocomplete 中设置项目数答案

【问题标题】：How to set the number of items in mat-autocomplete如何在 mat-autocomplete 中设置项目数
【发布时间】：2019-03-18 23:28:59
【问题描述】：

我现在正在尝试更改 mat-autocomplete 中的项目数一段时间，但没有成功。我正在使用 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？

非常感谢！

【问题讨论】：

标签： html css angular angular-material

【解决方案1】：

您可以通过覆盖 max-height 来更改自动完成面板的高度，如下所示：

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

See it in action here.

【讨论】：

谢谢，这解决了我的问题。我保持这个问题有点开放。我仍然想知道是否没有预期的方法来设置应该在面板中显示的项目数量。
我不知道答案，但如果我不得不猜测，我会说这是不可能的，因为假定给定面板没有通用的行高。换句话说，由于行高会根据内容而有所不同，因此如果不进行大量计算，就无法配置行数配置。