如何将鼠标悬停在角度自动完成选项上

Posted 2023-02-24

【中文标题】如何将鼠标悬停在角度自动完成选项上

【英文标题】：How to hover over the angular autocomplete options

【发布时间】：2019-11-26 18:06:30

【问题描述】：

我正在运行 Angular 应用程序，当我将鼠标悬停在自动完成垫选项上时，我有自动完成功能，我想查看整个客户编号和名称。我试着这样做

 <mat-form-field [style.cursor]="pointer" [style.cursor]="pointer" [style.width.px]=300  >
     <input class="selectCustomer" class="selectCustomerData" id="inputCustomer" matInput [matAutocomplete]="auto"  [formControl]="customerFilterControl" [(ngModel)]="customerName">
     <mat-icon matSuffix>keyboard_arrow_down</mat-icon>
       <p id="spandiv">customerName</p>  
     <mat-autocomplete dropdown-arrow="true" panelWidth ="450px" #auto="matAutocomplete" [displayWith] = "displayFn">
        <mat-option class="CustomerDropDown" *ngFor="let customer of filteredOptions | async"   [value] ="customer.AccountID +' '+'('+ customer.AccountName + ')'" (onSelectionChange)="onCustomerChange(customer)">
         customer.AccountID (customer.AccountName)  <p id="spandiv1">customer.AccountID (customer.AccountName)</p> 
        </mat-option>
    </mat-autocomplete>
  </mat-form-field>

基本上，当我将鼠标悬停在垫子选项上时，我想看到价值

【参考方案1】：

一种简单的方法是将选项文本放在带有小max-width 的div 元素中。然后设置div 元素的样式，以便通常隐藏溢出，但在悬停选项文本时不会。

示例：https://stackblitz.com/edit/angular-vzfpjy

此解决方案的一个问题是用户必须将鼠标悬停在选项的文本上才能显示完整的值。