如何使用带有按钮的角度材料选择(无表单域) [英] How to use angular material select with a button (without form field)

问题描述

我想使用没有 mat-form-field 的有角度的材料 mat-select 组件，我希望它在概念上类似于本机选择元素.有没有办法做到这一点?

I would like to use the angular material mat-select component without the mat-form-field, I want it to be conceptually similar to the native select element. Is there a way to achieve that?

推荐答案

一个简单的方法是使用 mat-menu 并在单击按钮时更新触发器.

A simple approach is to use a mat-menu and update the trigger on button-click.

使用 mat-menu 组件的演示.

如果您不想使用菜单而是使用 mat-select，这里有一个使用 select 组件并确保面板在打开时正确定位的解决方案:

If you don't want to use a menu but a mat-select, here is a solution which uses the select component and also ensures the panel is positioned properly when opened:

使用 mat-select 组件的演示

1. 在 button 组件中插入 select.
2. 定位并调整选择的大小以覆盖按钮.
3. 将 select 不透明度设为 0，这样就看不到了.
4. 在按钮 click 上调用 open() 方法.

1. insert the select in a button component.
2. position and size the select to cover the button.
3. make the select opacity 0 so it's not seen.
4. call the open() method on button click.

这篇关于如何使用带有按钮的角度材料选择(无表单域)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！