开箱即用时如何关闭Mat-select面板？

Question

要求很简单，但是我想我在mat-select API的使用上缺少基本概念，我也没有回答几个答案，但是似乎都没有用。

需求：一旦我将鼠标从面板上移开，我就应该能够单击“搜索”按钮。

当前行为：

1. 我必须单击两次以关闭面板
2. 另一个点击搜索按钮。

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

图像中以上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