在 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 个项目，我希望列表更短。
就像这个对类似问题的有用答案已经指出，有几种方法可以解决这个问题，选择哪一种取决于你是要全局应用规则还是本地应用规则。以下示例均不要求您更改组件的 ViewEncapsulation 类型。
本地覆盖
使用 ：：ng-deep，您可以简单地覆盖在组件的子组件中呈现的触发器和面板的样式。重要提示：：ng-deep 已被标记为已弃用，虽然它仍然有效，但不能保证它将来会这样做。
选择-多个示例.组件.css
::ng-deep .mat-select-trigger {
min-width: 80vw;
}
::ng-deep .mat-select-panel {
max-height: 80vh !important;
}
选择-多示例.组件.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;
}
DEMO(覆盖可以在/assets/styles/material-override.scss( 中找到(
灵活覆盖
在 MatSelect 上使用@Input pannelClass(垫选择(将允许您根据用例应用不同的覆盖，并独立于应用程序中的其他选择。
样式.css
.panel-override {
max-height: 80vh !important;
}
.panel-override-2 {
max-height: 100px !important;
}
选择-多示例.组件.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>
演示(注意工具栏中的复选框(
重新更新，尝试使用最大高度而不是最小高度。
如果您使用 Gordans 建议@Input Panelclass，请使用 'panelClass=..."而不是"[panelClass]=..."，否则样式不会生效。
FWIW，设置选项高度从未受支持。
你必须做css黑客来改变高度。
源： https://github.com/angular/material2/issues/8054