在 angular7 中，如何在显示项目列表时更改 mat-select 的高度?

问题描述

在 Angular7 中，如何在显示项目时增加 mat-select 的高度?我有以下组件文件:

In Angular7, how can I increase the height of a mat-select when it is showing the items? I have the following component file:

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 设置宽度:

Where I am able to set the width with the following CSS and 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 更改为:

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:

.myFilter .mat-select-trigger {
  max-height: 80vh;
}

然后盒子的高度会增加，而不是实际的项目列表.假设我以某种方式能够做到这一点，例如，如果更新了其中包含的数据，我如何确保列表不会超出 toppingList 数组中的项目数

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 toppingList array if, for example, the data contained within it is updated to

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.

更新:

所以我做了以下改动:CSS:

So I have made the following changes: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 个项目，我希望列表更短.

Which has changed the height to 85vh but if I have only 5 items I want the list shorter.

推荐答案

Like 这个有用的答案已经有类似问题声明有几种方法可以解决此问题，您选择哪一种取决于您是要在全球还是在本地应用您的规则.以下示例均不要求您更改组件的 ViewEncapsulation 类型.

Like this helpful answer to 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.

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

Using ::ng-deep you 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.

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 (I edited your code for the purpose of the demo)

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

This will apply your overrides to all triggers or panels within your application.

styles.css

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

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

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

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

Using the @Input pannelClass on your MatSelect (mat-select) will allow you to apply different overrides depending on your use case and independent from other selects in your app.

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 (note the checkbox in the toolbar)

这篇关于在 angular7 中，如何在显示项目列表时更改 mat-select 的高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！