如何通过按钮使用角度材质选择(无表单字段) [英] How to use angular material select with a button (without form field)

问题描述

我想使用不带 mat-form-field 的棱角材质 mat-select 组件，我希望它在概念上与本机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. 将 select 插入 button 组件中.
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屋！