Параметры выбора циновки не отображаются должным образом

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 файл.