18

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

4

3 回答 3

36

就像这个对类似问题的有用答案一样，已经说明有几种方法可以解决这个问题，您选择哪一种取决于您是要在全球范围内还是在本地应用您的规则。以下示例都不需要您更改组件的 ViewEncapsulation 类型。

本地覆盖

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

选择-多个-example.component.css

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

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

选择-多个-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>

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

全局覆盖

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

样式.css

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

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

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

灵活的覆盖

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

样式.css

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

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

选择-多个-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>

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

于 2018-10-24T18:28:49.913 回答
2

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

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

于 2019-05-09T19:36:38.427 回答
0

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

你必须做 css hack 来改变高度。

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

于 2019-03-20T07:14:07.490 回答