本地替代

Question

在Angular7中，如何在垫选择显示项目时增加其高度？我有以下组件文件：

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

Answer 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 （请注意工具栏中的复选框）

Answer 2

您可以按照物料文档here中的建议设置/更改面板的高度例如

所选内容的覆盖面板const SELECT_PANEL_MAX_HEIGHT: 256;的最大高度
面板在x轴const SELECT_PANEL_PADDING_X: 16;上的填充
面板的x轴填充（如果有缩进）（例如，有一个选项组）。 const SELECT_PANEL_INDENT_PADDING_X: number;
所选项目的高度，以em为单位。 const SELECT_ITEM_HEIGHT_EM: 3;

Answer 3

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

您必须进行css hack来更改高度。

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

Answer 4

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

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

在angular7中，当显示项目列表时如何更改垫选的高度？

4 个答案:

本地替代

全局替代

灵活的替代