Mat-select选项无法正确呈现

Question

我有以下HTML来显示选择位置，下面将显示该地图。

上面的视图我有以下HTML，

<mat-form-field class="locationSelector">
  <mat-select placeholder="Choose location" (ngModel)="ServiceLocations">
   <mat-option *ngFor="let location of ServiceLocations" [value]="location" style="width:200px; background-color: red; font-size: 10px;">
     {{ location.areaName }}
   </mat-option>
  </mat-select>
 </mat-form-field>
 <div>
   <agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom">
   </agm-map>
  </div>

相应的CSS是，

agm-map {
    height: 300px;
    position: relative;
}

.locationSelector {
    width: 20%;
}

我得到的观点是，

当我点击选择选项时，我得到如下视图，

如果我错了，请纠正我。

所有必需的材料组件都在app.module.ts中导入

Answer 1

在全局style.css文件中导入主题。