在 angular7 中，如何在显示项目列表时更改 mat-select 的高度？

Posted 2023-03-05

【中文标题】在 angular7 中，如何在显示项目列表时更改 mat-select 的高度？

【英文标题】：In angular7, how do I change the height of a mat-select when shows the list of items?

【发布时间】：2019-03-28 11:37:15

【问题描述】：

在 Angular7 中，如何在显示项目时增加 mat-select 的高度？我有以下组件文件：

import  Component, ViewEncapsulation  from "@angular/core";
import  FormControl  from "@angular/forms";

/** @title Select with multiple selection */
@Component(
  selector: "select-multiple-example",
  templateUrl: "select-multiple-example.html",
  styleUrls: ["select-multiple-example.css"],
  encapsulation: ViewEncapsulation.None
)
export class SelectMultipleExample 
  toppings = new FormControl();
  toppingList: string[] = [
    "Extra cheese",
    "Mushroom",
    "Onion",
    "Pepperoni",
    "Sausage",
    "Tomato",
    "CBFnTQcZ79AeYrdq",
    "1KiYwRjeqdqjNzVb",
    "TeLvgGl7t3yHDrZE",
    "s3ivzgLZO9qDNovJ",
    "QOOH2MCNRRXVJNwD",
    "1RWqdyPpu8yHSDoO",
    "d3aAOYIWYJE695Lf",
    "JoXDWP6zKSrZTIUc",
    "hpxQKFJsJcgVey5A",
    "UMI0akuHn2M5BaAP",
    "LRnQgNNjpqZwpdzj",
    "ZDIgw68mQyNLtxob",
    "Q6HY6tcqFcySJqD9",
    "WVFSg4TKeEqqoF1g",
    "ka4ORT9rUW8EPaPd",
    "ingfHsjBXAmt7yvo",
    "G3MY6MowhI7s0fN9",
    "ZlWqSoRnlhXQCbYz",
    "gerR70hrO5alwsOR",
    "dk0xrarQzfH6HAdl",
    "D1WCkB9jhhPMiuv7",
    "zPMj4g6Iu52jXqwq",
    "P4OEXKI2FZfFVqVn",
    "xMcOFx5m92d9oGQz",
    "dkyWq0tLJ8wQknaA",
    "iJZUeyjyyn3qQaCT",
    "5KhUjwEJK8wIYkoa",
    "YB3rEUkE12Pf9hcO",
    "qzrzSvzDXukVXvZi",
    "Hr1lccIcJZurLKiL",
    "noQo0pUMBeuQGpcf",
    "Tw4ACNCyDbpMI5MQ",
    "kK3QMSqyrNAwo3J0",
    "lvXP7qEm3biOpVbu",
    "gzy7bHaW2Qq6StN0",
    "GjXJAaRovr5CwHaO",
    "7CfVdILE7RhaVDvI",
    "8i5j8nlokIdkPEoO",
    "XpSWhgdwON3XFI15",
    "w5R5JfrDnuCzhqN7",
    "azhjvfD5geZaKjfc",
    "6y1Zdt18KSRNMdxx",
    "kd5ou8n6Ae5sILpj",
    "2p0YQKWdOvpXo4cD",
    "XfmEOsiIpq4C0PVc",
    "qYIzI8y3vOdx2KJ6",
    "6MzPKWHOn1oFOHpd",
    "tJgyk3p4UIDEj985",
    "RXwLNofzoJHUYgOf"
  ];

我可以使用以下 CSS 和 html 设置宽度：

CSS：

 .myFilter .mat-select-trigger 
  min-width: 80vw;

HTML：

<mat-form-field>
  <mat-select class="myFilter" placeholder="Pizza Stuff" [formControl]="toppings" multiple>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">topping</mat-option>
  </mat-select>
</mat-form-field>

这很好，但我希望能够设置高度而不是宽度。如果我尝试将 CSS 更改为：

.myFilter .mat-select-trigger 
  max-height: 80vh;

然后盒子的高度增加而不是实际的项目列表。假设我能够以某种方式做到这一点，那么我如何确保列表不会超出 toppingList 数组中的项目数，例如，如果其中包含的数据更新为

toppingList: string[] = [
    "Extra cheese",
    "Mushroom",
    "Onion",
    "Pepperoni",
    "Sausage",
    "Tomato",
    "CBFnTQcZ79AeYrdq",
    "1KiYwRjeqdqjNzVb",
    "TeLvgGl7t3yHDrZE",
    "s3ivzgLZO9qDNovJ",
    "QOOH2MCNRRXVJNwD",
    "1RWqdyPpu8yHSDoO",
    "d3aAOYIWYJE695Lf",
    "JoXDWP6zKSrZTIUc",
    "hpxQKFJsJcgVey5A"
  ];

换句话说，如果列表减少了，如何显示所有项目并删除滚动条？ 提前致谢。

更新：

所以我做了以下更改： CSS：

.myFilter 
  background-color: yellow; /* Added this to check it was working*/
  min-height: 85vh;

HTML：

<mat-form-field>
  <mat-select [panelClass]="'myFilter'" placeholder="Pizza Stuff" [formControl]="toppings" multiple>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">topping</mat-option>
  </mat-select>
</mat-form-field>

这已将高度更改为85vh，但如果我只有 5 个项目，我希望列表更短。

【参考方案1】：

就像this helpful answer 对一个类似的问题已经指出有几种方法可以解决这个问题，你选择哪一种取决于你是想在全球还是本地应用你的规则。以下示例都不需要您更改组件的 ViewEncapsulation 类型。

本地覆盖

使用::ng-deep，您可以简单地覆盖在组件的子组件中呈现的触发器和面板的样式。 重要提示：::ng-deep 已被标记为已弃用，虽然它仍然有效，但不保证将来会这样做。

select-multiple-example.component.css

::ng-deep .mat-select-trigger 
  min-width: 80vw;


::ng-deep .mat-select-panel 
  max-height: 80vh !important;

select-multiple-example.component.html

<mat-form-field>
  <mat-select placeholder="ITEMS" multiple>
    <mat-option *ngFor="let item of items" [value]="topping">item</mat-option>
  </mat-select>
</mat-form-field>

DEMO（我为演示目的编辑了您的代码）

---

全局覆盖

这会将您的覆盖应用到应用程序中的所有触发器或面板。

styles.css

.mat-select-trigger 
  min-width: 80vw;


.mat-select-panel 
  max-height: 80vh !important;

DEMO（可以在 /assets/styles/material-override.scss 中找到覆盖）

---

灵活覆盖

在MatSelect (mat-select) 上使用 @Input pannelClass 将允许您根据您的用例应用不同的覆盖，并且独立于其他选择你的应用程序。

styles.css

.panel-override 
  max-height: 80vh !important;


.panel-override-2 
  max-height: 100px !important;

select-multiple-example.component.html

<mat-form-field>
  <mat-select placeholder="ITEMS" multiple [panelClass]="applyPanelOverride2 ? 'panel-override-2' : 'panel-override'">
    <mat-option *ngFor="let item of items" [value]="item">item</mat-option>
  </mat-select>
</mat-form-field>

DEMO（注意工具栏中的复选框）

【讨论】：

您的“组件”版本实际上不起作用。确实如此，但这只是因为错误的假设。组件中的第一个 ::ng-deep .mat-select-panel 实际上确实为全局空间定义了这个 css。所以一旦你的组件第一次被使用，这个 css 现在就在全局范围内，并永远留在那里。因此，如果您有一个组件使用它，它将破坏第二个组件。因此，您的“灵活覆盖”是迄今为止最好的方法。 css 必须在全局范围内，因为 mat-select 使用覆盖，因此组件 css 不会对实际对话框生效。

更改默认最大高度可能会将某些部分 移出屏幕，并且可能使某些选项无法选择（如果您在 @987654333 中使用它，这些机会会更大@)

【参考方案2】：

FWIW，从未支持设置选项高度。

你必须做 css hack 才能改变高度。

来源： https://github.com/angular/material2/issues/8054

【参考方案3】：

重新更新，尝试使用最大高度而不是最小高度。

如果您使用 Gordans 的 @Input Panelclass 建议，请使用 'panelClass=..." 而不是 '[panelClass]=...'，否则样式不会生效。