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

Question

我在我的应用程序中使用了材料选择元素 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 的样式，以便我始终按照第一张图像获得结果。

原文由 Talk is Cheap Show me Code 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在你的： 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
}

原文由 Antonio Landa 发布，翻译遵循 CC BY-SA 4.0 许可协议