typescript 在 angular7 中，显示项目列表时如何更改 mat-select 的高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52962476/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
In angular7, how do i change the height of a mat-select when shows the list of items?
提问by Woody
In Angular7, how can I increase the height of a mat-select when it is showing the items? I have the following component file:
在 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"
];
}
Where I am able to set the width with the following CSS and html:
我可以使用以下 CSS 和 html 设置宽度：
CSS:
CSS：
.myFilter .mat-select-trigger {
min-width: 80vw;
}
HTML:
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>
Which is fine, but I want to be able to set the height not the width. If I try and change the CSS to this:
这很好，但我希望能够设置高度而不是宽度。如果我尝试将 CSS 更改为：
.myFilter .mat-select-trigger {
max-height: 80vh;
}
then the height of the box increases and not the actual list of items. Assuming that I am somehow able to do that, how can I then ensure that the list doesn't extend beyond the number of items in the toppingListarray if, for example, the data contained within it is updated to
然后盒子的高度会增加，而不是实际的项目列表。假设我以某种方式能够做到这一点，那么我如何确保列表不会超出toppingList数组中的项目数，例如，如果其中包含的数据更新为
toppingList: string[] = [
"Extra cheese",
"Mushroom",
"Onion",
"Pepperoni",
"Sausage",
"Tomato",
"CBFnTQcZ79AeYrdq",
"1KiYwRjeqdqjNzVb",
"TeLvgGl7t3yHDrZE",
"s3ivzgLZO9qDNovJ",
"QOOH2MCNRRXVJNwD",
"1RWqdyPpu8yHSDoO",
"d3aAOYIWYJE695Lf",
"JoXDWP6zKSrZTIUc",
"hpxQKFJsJcgVey5A"
];
In other words, if the list is reduced, how can I show all items and remove the scrollbar? Thanks in advance.
换句话说，如果列表减少了，如何显示所有项目并删除滚动条？提前致谢。
UPDATE:
更新：
So I have made the following changes: CSS:
所以我做了以下更改：CSS：
.myFilter {
background-color: yellow; /* Added this to check it was working*/
min-height: 85vh;
}
HTML:
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>
Which has changed the height to 85vhbut if I have only 5 items I want the list shorter.
这已将高度更改为85vh但如果我只有 5 个项目，我希望列表更短。
回答by Gordon Westerman
Like this helpful answerto a similar question already states there are a couple of ways you can solve this problem and which one you choose depends on whether you want to apply your rules globally or locally. None of the following examples require you to change the ViewEncapsulation type of your component.
像这个对类似问题的有用答案已经指出，有几种方法可以解决这个问题，您选择哪一种取决于您是要在全球还是在本地应用您的规则。以下示例均不要求您更改组件的 ViewEncapsulation 类型。
Local override
本地覆盖
Using ::ng-deepyou can simply override the styles of both the trigger and the panel that are being rendered in child components of your component. Important: ::ng-deep has been marked as deprecated and while it still works there is no guarantee it will do so in future.
使用::ng-deep您可以简单地覆盖在组件的子组件中呈现的触发器和面板的样式。重要提示：::ng-deep 已被标记为已弃用，虽然它仍然有效，但不能保证将来会这样做。
select-multiple-example.component.css
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
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(I edited your code for the purpose of the demo)
演示（我为演示目的编辑了您的代码）
Global override
全局覆盖
This will apply your overrides to all triggers or panels within your application.
这会将您的覆盖应用于应用程序中的所有触发器或面板。
styles.css
样式.css
.mat-select-trigger {
min-width: 80vw;
}
.mat-select-panel {
max-height: 80vh !important;
}
DEMO(overrides can be found in /assets/styles/material-override.scss)
演示（可以在/assets/styles/material-override.scss 中找到覆盖）
Flexible override
灵活覆盖
Using the @Input pannelClasson your MatSelect(mat-select) will allow you to apply different overrides depending on your use case and independent from other selects in your app.
在您的MatSelect( mat-select)上使用@Input pannelClass将允许您根据您的用例应用不同的覆盖，并且独立于您应用程序中的其他选择。
styles.css
样式.css
.panel-override {
max-height: 80vh !important;
}
.panel-override-2 {
max-height: 100px !important;
}
select-multiple-example.component.html
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(note the checkbox in the toolbar)
DEMO（注意工具栏中的复选框）
回答by davida227
Re the update, try to use max height instead of min.
重新更新，尝试使用最大高度而不是最小高度。
If you use Gordans suggestion of @Input Panelclass, use 'panelClass=..." instead of '[panelClass]=...', otherwise the styling won't take affect.
如果您使用 Gordans 对 @Input Panelclass 的建议，请使用“panelClass=...”而不是“[panelClass]=...”，否则样式不会生效。
回答by Ashe Li
FWIW, setting the option height has never been supported.
FWIW，从未支持设置选项高度。
You must do css hack for change height.
你必须做 css hack 来改变高度。
回答by Anjum....
You can set/change mat-panel height as suggest in material document heresuch as
您可以按照此处的材料文档中的建议设置/更改垫板高度， 例如
- The max height of the select's overlay panel
const SELECT_PANEL_MAX_HEIGHT: 256; - The panel's padding on the x-axis
const SELECT_PANEL_PADDING_X: 16; - The panel's x axis padding if it is indented (e.g. there is an option group).
const SELECT_PANEL_INDENT_PADDING_X: number; - The height of the select items in em units.
const SELECT_ITEM_HEIGHT_EM: 3;
- 选择的叠加面板的最大高度
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;
