在 mat-list-option 中更改文本颜色 [英] To change text-color in mat-list-option

问题描述

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

I am using mat-selection-list component in which mat-list-option is displaying a contact list as shown below:

现在当我点击特定的 contact-name(例如 Graeme swan)时 background-color 正在改变，并且 background-color 是恒定的，直到我单击另一个联系人，但我也想更改 text-color 并且 tex-color 应该保持不变，直到我单击新联系人.

Now the background-color is changing when i click particular contact-name(eg Graeme swan) and background-color is constant until i click another contact , But i want to change the text-color also and the tex-color should be constant until i click new contact.

她的是 stackblitz 链接.

推荐答案

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

to style your selection in list components as

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 文件中

add these in ts file

  selectedItem:number = null;

      ....

  selectionChanged(i) {
      selectedItem = i;
  }

将这些添加到 css

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

slackBlitz 网址

这篇关于在 mat-list-option 中更改文本颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！