更改 mat-list-option 中的文本颜色

我在用mat-selection-list组件其中mat-list-option正在显示一个contact list如下所示：

Now the background-color当我点击特定时正在改变contact-name（例如格雷姆天鹅）和background-color是不变的，直到我单击另一个联系人，但我想更改text-color还和tex-color 应保持不变，直到我单击新联系人.

她的就是堆栈闪电战 link.

将列表组件中的选择样式设置为

html

<mat-selection-list #linkList >
  <mat-list-option *ngFor="let link of links;index as i" (selectionChange)="selectionChanged(i)" [class.active]="selectedItem === i">
    <a mat-list-item> <span class="contact-names">{{ link }}</span> </a>
  </mat-list-option>
</mat-selection-list>

将这些添加到 ts 文件中

  selectedItem:number = null;

      ....

  selectionChanged(i) {
      selectedItem = i;
  }

将这些添加到 css 中

.mat-list-item.active .contact-names{
  color: red;
}

堆栈闪电战 url