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

Question

在 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 个项目，我希望列表更短。

原文由 Woody 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

本地覆盖

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

选择多个示例.component.css

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

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

选择多个示例.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 （为了演示目的我编辑了你的代码）

---

全局覆盖

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

样式.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 将允许您根据您的用例应用不同的覆盖，并且独立于您应用程序中的其他选择。

样式.css

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

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

选择多个示例.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 （注意工具栏中的复选框）

原文由 Gordon Westerman 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

原文由 davida227 发布，翻译遵循 CC BY-SA 4.0 许可协议