如何保持 Angular 选择选项的位置与字段？答案

【问题标题】：How to keep the position of the Angular select options with the field?如何保持 Angular 选择选项的位置与字段？
【发布时间】：2020-07-09 13:42:32
【问题描述】：

在使用 ng2-google-charts 和 angular-material 时，选择列表位于图表下方，而控件位于图表上方。我如何将它们放在一起？

<mat-form-field>
  <mat-label>Continent</mat-label>
  <mat-select [(ngModel)]="continents" (change)="onSelectContinent()">
    <mat-option *ngFor="let continent of continents | keyvalue" [value]="continent.key">{{continent.value}}</mat-option>
  </mat-select>
</mat-form-field>

选择列表是在元素之外呈现的 ini cdk-overlay-container html 元素。

模块导入

import {MatFormFieldModule} from '@angular/material/form-field';
import {MatSelectModule} from '@angular/material/select';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatButtonModule} from '@angular/material/button';

【问题讨论】：

标签： angular angular-material

【解决方案1】：

我错过了一个主题

添加

https://material.angular.io/guide/theming#defining-a-custom-theme

到 enter link description here 中描述的 styles.css 文件的顶部

【讨论】：