问题标签 [mat-select]

是否可以使 mat-select-panel 的宽度与 mat-select-field 相同并使其响应？
我在具有自适应宽度的 flex div 中有 3 个 mat-select。我希望我的 mat-select-panel 始终具有与我的 mat-select 相同的宽度；有什么方法可以实现吗？

再会，

通常，我会将下拉值设置为字符串，例如：

下拉列表中设置rReloadType.key为 的值在哪里，如果用户单击下拉列表，但未选择任何值，则将显示在下拉列表下方。stringreloadTypeObjStr"reloadTo is required"

我希望有一个下拉列表，将值设置为对象而不是字符串，例如：

where是下拉列表rReloadType中的对象（而不是），并设置为，这是一个对象。此时，如果用户没有从该下拉列表中选择任何值，则不会显示，此时 mat-error 不起作用。stringreloadTypeObjreloadTo is required

我想请教一下，有什么我可以做的吗？或者角度不支持这个？我必须使用字符串值而不是对象值进行下拉？

我通过 iframe 在另一个网站上加载我的页面。当我使用本机选择时，

但是当我使用垫选择时，

这是我的简单代码，

css中是否有任何选项可以实现这一目标？

尝试在 html 中使用 mat-select 时......它不起作用。

结果显示如下

结果

PS我已经在app.module.ts文件中的imports下导入import {MatNativeDateModule} from '@angular/material/core';并添加了MatNativeDateModule

在 app.module.ts 文件和导入部分中添加 MatSelectModule 后，现在选择控件和选项不可见。

下面是我的 app.module.ts 文件

选择控件不可见 干扰 UI

当对 api 进行异步调用并尝试将数据从 api 绑定到 mat-select 控件时，它没有绑定 bcoz mat-select 已经设置，而结果在一段时间后被获取。谁能告诉我如何解决这个问题

app.component.html

在 app.component.ts

很多人似乎都有这个问题，但我还没有找到不会在其他领域造成问题的解决方案。

如何自定义 mat-select 下拉位置？

这个效果很好。...除了它也会影响 mat-autocompletes，而且不是很好。它完美地排列了 mat-select 选项，并将 mat-autocomplete 选项向下移动 30px。不好。

所以我想，也许以某种方式将css隔离到mat-select。mat-select 没有唯一的父类，所以任何东西 :child 都不起作用。有一个直接的子类虽然称为mat-select-panel-wrap. 所以我寻找一种通过这个独特的孩子访问父母的方法。:has 是我发现的唯一声称这样做的东西，但是唉，浏览器支持为零。

https://caniuse.com/css-has

早在 11 和更早的版本中，Angular Material 就有一个很棒的overlayDir: CdkConnectedOverlay;功能，可以更改选项框的位置。但是他们贬值了它，然后对其进行了保护，而没有解决让人们首先使用它的问题。他们的“解决方案”是“试试我们的实验垫选择”。该解决方案充其量是可疑的。

从 Angular 11 更新到 12 时，MatSelect overlayDir 现在是私有的。我现在如何访问它？

我的问题是，有没有人知道将上述 css 隔离为 mat-selects 的方法？或者更具体地说，只是 mat-select 选项框。

我需要在 Angular Material 中自定义 Select

https://stackblitz.com/edit/angular-ivy-r4kh1j?file=src%2Fapp%2Fcore%2Fcomponents%2Flayout%2Flayout.component.ts

糟糕，我有这个选择...

注意：根据我的测试，原图会有所变化，对不起！

样式在这里定义：

https://stackblitz.com/edit/angular-ivy-r4kh1j?file=src/app/core/components/layout/layout.component.scss

我需要：

1. 向下移动整个选项列表。
2. 将 retangle（整个选项列表）设置为灰色。
3. 设置阴影....
4. 不要移动（或分离）Mat-Select-Panel（经过测试选择不同的选项）。

我需要在样式中进行哪些更改？

源自这个问题： Change style Select Angular Material

我在使用 Angular Material 时遇到了这个问题，特别是mat-select它的mat-options：mat-options 显示在其他组件之后。

我需要在place holder下面的组件上方显示选项（隐藏它）；不是之后也不是之间！对于这种情况，蓝色矩形应被绿色矩形隐藏。

这是我的代码：

https://stackblitz.com/edit/angular-ivy-buotqn?file=src%2Fapp%2Fcore%2Fcomponents%2Flayout%2Flayout.component.html

如何在选择的占位符下方和下方的组件上方显示选项列表？

我已经使用 selectionChange 事件创建了一个 mat-select，但是当值更改时，该事件不会被触发。

.html 文件

ts文件

我正在尝试制作自定义垫选择样式。到目前为止，除了显示所选值的跨度之外，我制作了所有内容。我说的是mat-select-min-line元素mat-select-value-text。

这就是我现在所做的

这就是我现在所做的

这就是元素的外观

在 mat-select 中，元素嵌套如下：

A 编辑了父类并添加了边框，但内部两个元素的大小等于文本，我无法更改它们的任何内容，也无法居中该文本。

默认情况下，这两个元素的大小是auto x auto默认的，如果我更改它，添加填充、边距，什么都不会发生。以下是我到目前为止所尝试的。

实际上只有填充起作用，它不会影响它。我还通过现场检查员直接尝试了所有这些，但没有任何效果。

注意：我正在使用 SCSS