Angular Mat Select 显示键盘焦点和鼠标悬停焦点的问题

发布于07月30日

在这里张贴这篇文章是为了省go 别人的头疼.

未设置初始值时，Angular 会自动聚焦于第一个可用选项.这可能会让用户感到困惑，因为它显示了对第一个选项的关注以及悬停的聚焦选项(同时有两个聚焦选项).在网上搜索后，对于这一困境，有一大堆臃肿而无法获取的答案.

推荐答案

我发现，通过添加一个带有style="Display:Hidden"的隐藏选项并将其设置为Mat Select的缺省值，您可以在鼠标悬停时显示焦点并保持键盘焦点/控件.

现在，所有选项最初都处于未选中状态，并且只会将焦点放在悬停的选项上.如果用户使用Tab键或使用键盘控件，焦点将保留在Mat Select中，并且可以通过键盘进行访问.

希望这对有同样问题的人有所帮助！

//HTMl
      <mat-form-field>
        <mat-label>Select</mat-label>
        <mat-select #mySelect value="initialSelection">
          <mat-option value ="empty" style="display: none;"></mat-option>
          <mat-option *ngFor="let selection of selections" [value]="selection.selectionId"> 
            {{ selection.selectionId }}
          </mat-option>
        </mat-select>
      </mat-form-field>

//TS

  public initialSelection = 'empty';