html - 如何在 mat-autocomplete 中设置项目数
问题描述
我现在正在尝试更改 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 技巧的提示,以将高度设置为 512 像素而不是默认的 256 像素吗?
非常感谢!
解决方案
您可以通过覆盖 max-height 来更改自动完成面板的高度,如下所示:
::ng-deep .mat-autocomplete-panel {
max-height: 512px !important;
}
推荐阅读
- javascript - 如何在循环中正确使用异步等待
- vue.js - 网址查询参数
- php - Lumen / Laravel:无法弄清楚对 json 响应进行单元测试的工作原理
- rabbitmq - Elm 中的 RabbitMQ 客户端
- xcode - 归档 iOS Audiokit 项目时出现意外的 Mach-O 标头代码
- javascript - 如何在已经由前向动画处理的元素上应用悬停效果?
- php - 如何使用相同的凭据验证 Wordpress 和 PHP 应用程序?
- java - Java Spring验证不起作用
- python - 一次调整两个轴的大小 h5py
- python - 编辑 pyparsing 解析结果