Angular 根据 selected 元素的长度动态改变 mat-select 宽度

Question

我正在尝试解决这个问题，以便在选择长字符串时动态设置下拉列表的宽度。尝试设置 width:"auto" 或 fit-content 但似乎不起作用。

希望有人能帮助我。 Stackblitz link 如下：

https://stackblitz.com/edit/angular-mat-select-testing?file=src/app/app.component.html

Answer 1

此演示中的工作演示StackBlitz Demo

您需要在 app.component.scss..

中添加以下 css 代码

::ng-deep .auto-width {
    .mat-form-field {
       width: auto !important;
    }
    .mat-select-value {
       max-width: 100%;
       min-width: 100%;
    }
 }

为了检测样式并将其应用于深层组件，您需要在 class 名称 .auto-width 之前添加 ::ng-deep。另一个选项是您可以在 style.scss 文件中添加 .auto-width class 以便每个组件都将使用此全局 css 配置。

Angular 根据 selected 元素的长度动态改变 mat-select 宽度

Angular change mat-select width dynamically based on length of selected element

width

angular