角形材料垫选项所选值高亮显示

Question

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

<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>

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上的列表