html - Angular Material 垫选项选择值突出显示

Question

我想突出显示被单击的所选值的背景颜色。我正在看这个例子 这里突出显示了多个选择值。单击以选择一个选项时，我只想突出显示选定的值。

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>

应用.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