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>

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

更新：基于当前的垫选择列表选项：https://material.angular.io/components/list/api

声明 [multiple] =“ false” 并处理 .mat-list-single-selected-option 样式，这将突出显示当前选择的mat-list-option < / p>

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

角材质垫选项选择值突出显示

2 个答案: