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

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>

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

.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

像这个对类似问题的有用答案一样，您已经指出有两种方法可以解决此问题，选择哪种方法取决于您要在全球还是本地应用规则。以下示例均不需要您更改组件的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>

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

全局替代

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

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>

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