Чтобы выделить данные по клику в Iist с компонентом выделения

Question

Я использую компонент List with selection для отображения контактов в виде списка, который выглядит следующим образом:

Здесь, когда я нажимаю на contact-name (например, контакт 1). Я хочу изменить text-color из contact 1, и text-color должен быть таким же, пока я не нажму на другой contact-name (например, контакт 3).
Вот ссылка stackblitz

Answer 1

Вы можете использовать простой хак CSS, чтобы добиться этого, как показано ниже:

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

Когда [aria-selected = "true"] имеет значение true, цвет меняется на синий. Кроме того, поскольку вам нужно выбрать только один элемент за раз, вам нужно выполнить следующие действия в .ts:

@ViewChild(MatSelectionList) selectionList: MatSelectionList;
ngOnInit(){
   this.selectionList.selectedOptions = new SelectionModel<MatListOption>(false);
}

Демо здесь: https://stackblitz.com/edit/mat-select-list-qwi7fv

Answer 2

Вы можете добавить указатель мыши на событие, который будет подчеркивать ваш контакт (измените класс css с помощью ngclass или чего-то в этом роде, или просто NgIf) и вы добавляете другое событие mouseout, которое удаляет выделение

РЕДАКТИРОВАТЬ: стекблиты: https://stackblitz.com/edit/mat-select-list-jdqn8n

РЕДАКТИРОВАТЬ РЕДАКТИРОВАТЬ: измените указатель мыши на