Angular材質墊選項選中值高亮

Question

我想突出顯示單擊的選定值的背景顏色。 我正在瀏覽這個例子 這里它突出顯示了多個 select 值。 單擊以選擇選項時，我只想突出顯示選定的值。

https://stackblitz.com/edit/material-selection-list-5-0-0-selection-color-change?file=app%2Fapp.component.css

<hello name="{{ name }}"></hello>
<p>
  Area 3 is initially selected. The displayed array below updates as options are selected/deselected.
</p>
<div>
  Selected: {{ selectedOptions | json }}
</div>

<mat-selection-list #list [(ngModel)]="selectedOptions" (ngModelChange)="onNgModelChange($event)">
    <mat-list-option *ngFor="let tta of taskTypeAreas" [value]="tta.name">
      {{tta.name}}
    </mat-list-option>
</mat-selection-list>

app.css

p {
  font-family: Lato;
}

mat-list-option {
  margin: 10px;
}

mat-list-option[aria-selected="true"] {
  background: rgba(0, 139, 139, 0.7);
}

Answer 1

mat-selection-list 不適合單值選擇，但如果你願意，你可以嘗試這樣的事情。

mat-list-option[aria-selected="true"] {
  background: blue;
}

您必須清除每個選擇https://stackblitz.com/edit/angular-i3pfu2-kylx8v的列表

Answer 2

更新：基於當前的 mat-selection-list 選項： https://material.angular.io/components/list/api

聲明[multiple]="false"並處理.mat-list-single-selected-option樣式，這將突出顯示當前選擇的 mat-list-option

<mat-selection-list [multiple]="false">
  <mat-list-option>1</mat-list-option>
  <mat-list-option>2</mat-list-option>
  <mat-list-option>3</mat-list-option>
</mat-selection-list>

.mat-list-item.mat-list-single-selected-option {
  background: #FF0000;
}