要突出显示单击带有选择组件的Iist中的数据

Question

我正在使用List with selection组件将联系人显示为列表，如下所示：

当我单击contact-name时（例如联系人1）。我想更改text-color的{​​{1}}，在我单击另一个contact 1（例如，联系人3）之前，text-color应该是相同的。
这里的{ {3}}链接

Answer 1

您可以使用简单的CSS hack来实现它，如下所示：

cron

当[aria-selected =“ true”]为true时，将颜色更改为蓝色。 另外，由于一次只需要选择一项，因此需要在.ts中执行以下操作：

.mat-list-option[aria-selected="true"] {
  .mat-list-item{
        color : blue;
    }
  }
.mat-list-option[aria-selected="false"] {
  .mat-list-item{
        color : black;
    }
  }

此处演示：https://stackblitz.com/edit/mat-select-list-qwi7fv

Answer 2

您可以添加事件鼠标悬停，以突出显示您的联系人（使用ngclass或类似名称更改CSS类，或者仅更改NgIf） 然后添加另一个事件mouseout来删除突出显示

编辑：stackblits：https://stackblitz.com/edit/mat-select-list-jdqn8n

编辑编辑：将鼠标悬停以单击