如何在所选选项上打开 mat-select答案

【问题标题】：How to open mat-select on the selected option如何在所选选项上打开 mat-select
【发布时间】：2021-01-16 03:07:28
【问题描述】：

所以this 是 mat-select 的默认行为（选择的选项直接打开）和 this 是我的代码给出的，因为我将 mat-option 字段包含在 div 标签内（用于样式目的）

下面是我的代码

component.html

<mat-select [(value)]="selectedGroup" class="text-head" required panelClass="headerPanel">                  
    
    <mat-form-field *ngIf="groupList.length>4" class="organistation-searchField" appearance="outline">
        <input (keydown)="$event.stopPropagation()" [(ngModel)]="searchTerm" matInput (ngModelChange)="_globals.dropdownSearch($event,'group_list','headerPanel')" placeholder="Search Zone">
        <mat-icon matSuffix style="color:#24539f;">search</mat-icon>
    </mat-form-field>

    <div class="panel-optn" style="max-height:190px;">
        <mat-option class="group_list" *ngFor="let group of groupList" [value]="group.group_id">
            {{group.name}}
        </mat-option>
    </div>    
</mat-select>

组件.css

.panel-optn{
   overflow-y: auto;
   scrollbar-color: slategrey rgba(0,0,0,0.3); /* thumb and track color */
   scrollbar-width: thin;
}

.panel-optn::-webkit-scrollbar {
   width: 0.5em;
 }


.headerPanel{
   position: relative;
   top: 40px;
   overflow-y: hidden !important;
   left: -8%;
   max-width: 235px !important;
}

在 mat-select 上使用 panel-optn 类并删除 div 标签可以解决问题。但我不能这样做，因为这样搜索栏就不会固定在顶部。有没有办法恢复默认行为？

【问题讨论】：

可以对材质类进行样式覆盖，通常需要我对元素进行一些搜索和检查，但这是可能的（chrome devtools 反复试验）。只需确保将样式放在全局样式表中，这样就不需要使用 ng-deep，而且我通常在这个类前面加上我的组件名称，所以我知道它只会影响 mat-select 的这个实例。跨度>
究竟如何设计风格来实现功能？
右键单击，检查元素，开始查看影响元素的 css 元素，并通过在每个级别创建新类来更改属性，直到获得所需的更改。那里有关于如何使用 chrome 开发工具/firefox 开发工具来创建 css 的视频/教程，材料只是让它变得有点棘手（可能需要添加 !important 到课程中，并且绝对必须在全球 css 中拥有它级别）

标签： css angular angular-material

【解决方案1】：

所以它不会在选择打开时滚动到最后一个选定的元素。

我会尝试使用某种基于 scrollTo 方法的指令来覆盖它

【讨论】：

如何滚动到选中的元素？我猜对于 scrollTo 你需要提到 id 或 class 对吧？
我正在考虑在 component.ts 中触发 document.getElementById('mat-option-5').scrollIntoView() On (selectionChange)="" 动作