如何將 Angular select 選項的 position 與字段保持一致？

Question

在使用ng2-google-charts和angular-material時，select 列表位於圖表下方，而控件位於圖表上方。 我如何將這些放在一起？

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

select 列表是 ini cdk-overlay-container html 元素，它在<app_root>元素之外呈現。

模塊導入

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

Answer 1

我錯過了一個主題

添加

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

到 styles.css 文件的頂部，如在此處輸入鏈接描述中所述