Как изменить фон MatSelect с помощью ngClass? - PullRequest
Новая
       9

Как изменить фон MatSelect с помощью ngClass?

0 голосов
/ 23 сентября 2019

Я пытаюсь изменить цвет фона моей опции выбора mat или контейнера div, используя ngClass в Angular 8, всякий раз, когда я изменял значение, следовал документации и некоторым примерам, но они работали только со списком, результаты которого яхочу не работает, когда я пытаюсь выбрать мат.

вот мой HTML-код 

<div class="status">  
<mat-select matTooltip="Update your progress"
            (selectionChange)="updateStatus($event,listtask)"
            [(ngModel)]="listtask.status">

  <mat-option *ngFor="let status of status" 
              [value]="status" 
              [ngClass]="
              {
                'selectbg1':status=='Not Yet Started',
                'selectbg2':status=='In Progress',
                'selectbg3':status=='Done'
              }">
  </mat-option>

</mat-select>
</div>

CSS 

.selectbg1{
  background:red;
}

.selectbg2{
  background:orange;
}

.selectbg3{
  background:green;
}

Компонент TS 

export class TasklistComponent implements OnInit {
  //status array
  status = ['Not Yet Started','Working on It','On Going','Almost There','Done'];
  selectedStatus:string;
}

1 Ответ

0 голосов
/ 23 сентября 2019

Вам нужно нацелить диапазон внутри параметра циновки 

.selectbg1 span {
  background:red;
}

.selectbg2 span {
  background:orange;
}

.selectbg3 span {
  background:green;
}
...