如何将材料选择下拉菜单的大小设置为与表单字段宽度不同的大小

Question

我正在尝试从 @angular/material 库创建一个

<mat-select>

，其中表单字段的宽度很小（75px），但下拉菜单更大，可以容纳比表单字段中显示的更长的文本选项。

这是期望的结果：

Answer 1

将

<mat-form-field>

设置为表单字段所需的宽度。然后将

panelWidth

中的

<mat-select>

属性设置为所需的宽度，或将

null

设置为下拉列表中最大元素的大小。

<mat-form-field style="width: 75px;">
    <mat-select panelWidth="null">
        <mat-option *ngFor="let d of data">
            ...
        </mat-option>
    </mat-select>
  </mat-form-field>

文档：材质文档：https://v17.material.angular.io/components/select/api