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

【问题标题】：How to load angular material select mat-option list below the select field correctly.如何正确加载选择字段下方的角度材料选择垫选项列表。
【发布时间】：2018-04-05 09:41:27
【问题描述】：

我在我的应用程序中使用了材料选择元素 mat-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;

}

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

但是在选择任何选项（“无”除外）后，如果我再次单击该字段以更改该选项，选项列表将加载为像这样的旧材料样式并将我的选择字段隐藏在黄色突出显示后面的某处。

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

【问题讨论】：

标签： css angular material-design angular-material

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

<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;
}

它在我的应用中运行良好！

【讨论】：

那些全局 .sass 样式对我有用： .mat-select-panel-wrap { margin: 28px 0;指针事件：自动； } .cdk-overlay-pane { 指针事件：无！重要； > div { 指针事件：自动； } }

【解决方案3】：

这个体验是prescribed by Material Design。

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

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

您可以按照已经建议的方式修改mat-select-panel 类的位置，但是这种方法除了违反 Material Design 准则之外还存在三个技术问题。

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

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

Third, the position of the panel is dynamically determined so that when the select field is near the bottom of the window such that there is not enough room to display it below the field, the panel is displayed above the field instead.因此，只有在场地下方有面板空间时，向下调整面板的位置才会起作用。虽然大多数情况下您可能能够侥幸逃脱，但这只不过是一种可能最终会失败的 hack。

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

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

【讨论】：

您的帖子鼓励我们严格遵循 Material Design.by material design 规定的经验，而不是走老路。感谢您的澄清。

【解决方案4】：

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

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

this example 对我来说很好用。

【讨论】：

示例项目中没有Css？？

【解决方案5】：

在您的： app.module.ts

 import {MAT_SELECT_CONFIG} from '@angular/material/select'; // <---- import this
     
    providers: [
       { provide: MAT_SELECT_CONFIG, useValue: { disableOptionCentering:'false'}}  // <---- and set the disableOptionCentering in false
    ]

在您的： component.ts

@Component({
  selector: 'app-files',
  templateUrl: './files.component.html',
  styleUrls: ['./files.component.css'],
  encapsulation: ViewEncapsulation.None // <----use this
})

在您的： component.css

.mat-select-panel {
  transform: translate(-2px, 30px) !important; // <--- config the panel style
}

【讨论】：