Mat-выделение-список удалить выделение

#angular #material-design #mat-list

#angular #материал-дизайн #mat-список

Вопрос:

Когда я нажимаю на опцию mat-selction-list, она остается выделенной

введите описание изображения здесь

Однако я хочу удалить выделение, потому что нажатие на эту опцию открывает диалоговое окно, и при закрытии диалогового окна я хочу вернуть список в нормальное состояние:

введите описание изображения здесь

Есть идеи, как это сделать?

Код:

       <mat-selection-list #members
                          fxLayout="row"
                          [multiple]="false"
      >
        <mat-list-option *ngFor="let item of links"
                         fxFlex="50%"
                         class="fs-24 mb-10"
        >
          <a class="fs-24 black" (click)="openDialog(item.key)">
            <div fxLayout="column" fxLayoutAlign="center center">
              <div class="fs-24 mb-5">{{registrationsAll | countIfInData: 'status' : item.key}}</div>
              <div>{{ item.name }}</div>
            </div>
          </a>
        </mat-list-option>
      </mat-selection-list>

 

Комментарии:

1. попробуйте добавить фон: прозрачный в .mat-list-option: фокус css

2. Предложение @zainhassan сработает, если я удалю: фокус. Спасибо!

Ответ №1:

Решаемая благодаря предложению @zainhassan!

CSS

 .mat-list-option {
  background: transparent;
}