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

她是推荐答案

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

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