要在mat-list-option中更改文本颜色

Question

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

现在，当我单击特定的background-color（例如Graeme swan）时，contact-name会发生变化，并且在我单击另一个联系人之前，background-color会一直保持不变，但是我想更改{{1} }，并且在我单击新联系人之前，tex-color应该保持不变。

她是stackblitz链接。

Answer 1

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

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

slackBlitz网址