Question

我在我的应用程序中使用材质选择元素mat-select。我想加载选择字段正下方的选项列表，就像常规选择框一样，而不是叠加样式给出。为此，我将以下样式应用于给定的select元素。

             <mat-form-field>
                  <mat-select [formControlName]="input1">
                        <mat-option>None</mat-option>
                        <mat-option *ngFor="let opt_value of  input1.enumNames; let i = index" value="{{input1.enum[i]}}" >{{opt_value}}</mat-option>
                  </mat-select>

             </mat-form-field>

这是我在检查负责元素后应用的样式。

.mat-select-panel {
   transform: translate(-2px, 44px) !important;
  font-family: Lato,sans-serif;

}

现在，当我第一次点击选择字段时，选项列表会根据需要加载，就在选择字段的下方。像这样......

但是在选择任何选项（除了'none'）之后，如果我再次单击该字段以更改选项，则选项列表会像这样加载旧材料样式，并隐藏我在黄色突出显示后面的选择字段。

如何正确设置Mat-options或mat-select-panel的样式，以便始终按照第一张图像获得结果。

Answer 1

使用disableOptionCentering的{{1}}属性。 https://material.angular.io/components/select/api

Answer 2

此体验为prescribed by Material Design。

菜单位于其发光元素上方，以便当前所选菜单项显示在发光元素的顶部。

你应该问自己的第一个问题是“我为什么要/需要改变这种体验？”对于Material Design应用程序，它是正确的用户体验。

您可以修改已建议的mat-select-panel类位置，但除了违反Material Design指南外，该方法还存在三个技术问题。

首先，当列表打开时，面板会动态插入到DOM中，并且它不是mat-select元素的子元素，所以如果你有多个选择组件，它们都会受到影响同样的方式。但是，您可以使用panelClass的{{1}}属性来解决该问题。

其次，所需的“偏移”金额取决于面板的大小（与项目数和窗口大小相关）和所选项目的索引。以固定的距离调整位置将不会始终产生期望的结果。您需要具体了解所选项目上方显示的其他项目数量，并将该数字乘以一个项目的偏移量（例如48px - 选择列表项目的标准高度）。

第三，动态确定面板的位置，以便当选择区域靠近窗口的底部，使得没有足够的空间在场地下方显示它时，面板显示在场的上方。因此，仅当面板下方的面板有空间时，才能向下调整面板的位置。虽然你可能在大多数时间都可以逃脱，但它只不过是最终可能会失败的黑客攻击。

如果你能以可预测，可靠的方式（而不是黑客）解决所有这些问题，请在此处发布您的代码 - 我相信其他人也会从中受益。

更好的解决方案可能是根据允许自定义的menu component创建自己的自定义选择控件。

Answer 3

我认为mat-option列表的位置是动态确定的。我在panelClass="testClass"中使用了disableOptionCentering和mat-select属性。

<mat-select placeholder="Select a movie" disableOptionCentering panelClass="testClass">
   <mat-option *ngFor="let movie of movies" [value]="movie">
     {{movie}}
   </mat-option>
</mat-select>

还要在我的style.scss文件中添加以下样式类：

.testClass{
  margin-top: 35px;
  margin-bottom: 30px;
}

对于我的应用来说效果很好！

Answer 4

您可以修改CSS以使用保证金：

.mat-select-panel {
  margin-top: 45px;
}

this example对我来说很好。

如何正确加载角度材料选择选项字段下方的选项列表。

4 个答案: