鼠标开箱后如何关闭Mat-select面板？

Question

要求很简单，但不知何故我认为我缺少使用 mat-select API 的基本概念，我也遵循了一些答案，但 none 似乎有效。

要求：只要我将鼠标从面板上移开，我就应该能够点击“搜索”按钮。

当前行为：

我必须点击两次才能关闭面板
另一个点击搜索按钮。

注意：“搜索”按钮始终处于启用状态。

图片中上面Mat-select的代码：

<div class="form-group">
     <mat-form-field class="full-width" >
         <mat-select   placeholder="Account Status"  
                       name="statusSelect"
                       #statusSelect="ngModel"
                       [(ngModel)]="advanceSearchFormData.statusSelect" 
                       multiple>
 <mat-select-trigger *ngIf="advanceSearchFormData.statusSelect?.length > 1" >
           Multiple
 </mat-select-trigger>
  <mat-option  *ngFor="let status of accountStatus" 
       [value]="status.accountStatus">
                  {{ status.accountStatus }}
   </mat-option>
   </mat-select>
   </mat-form-field>
   </div>

Answer 1

谢天谢地，MatSelect 提供了对面板元素的引用，因此当它打开时，您可以抓住它并添加事件监听器来监听 mouseleave 事件：

this.matSelect.openedChange.subscribe(opened => {
  if (opened) {
    this.matSelect.panel.nativeElement.addEventListener('mouseleave', () => {
      this.matSelect.close();
    })
  }
})

并且不要忘记删除事件侦听器并取消订阅。

DEMO

Answer 2

我找到了这个案例的明确解决方案：

   <mat-select #matmat placeholder="observers" [formControl]="observers"
                                [(value)]="selectedViewers" multiple> 
                                <div (mouseleave)="matmat.close()">
                                    <mat-option *ngFor="let user of allUsers" [value]="user">{{user.firstName}}
                                    </mat-option>
                                </div>
     </mat-select>

鼠标开箱后如何关闭Mat-select面板？

How to Close Mat-select Panel when Mouse is out of the box?

mouseout

angular-material

angular