如何正确加载选择区域下方的角材选择垫选项列表。

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

我认为 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 2

使用的disableOptionCentering属性mat-select。 https://material.angular.io/components/select/api

Answer 3

您可以修改 CSS 以使用边距：

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

在这个例子中它对我来说效果很好。