Angular 单击“清除”按钮后，Mat自动完成不会打开下拉面板

我有自定义垫自动完成在角项目。它有两个后缀，清除和下拉按钮。当我点击清除按钮code

this.myControl.reset（“”，{emitEvent:true}）时重置输入值。但是下拉面板没有打开。我尝试使用以下格式，但都不起作用

this.myControl.reset（）
this.myControl.reset（“”，{emitEvent:true}）
此.myControl.patchValue（“”）

自动完成显示示例。ts

.......

 clearInput() {
    this.arrowIcon = "arrow_drop_down";
    this.myControl.reset('', { emitEvent: true });
  }

......

自动完成显示示例.html

<form class="example-form">
 <mat-form-field class="example-full-width">
   <mat-label>Assignee</mat-label>
   <input
     type="text"
     matInput
     [formControl]="myControl"
     [matAutocomplete]="auto"

   />
   <div matSuffix style="display:flex">
     <button
       *ngIf="myControl!==undefined && myControl.value!==null && myControl?.value!==''"
       mat-icon-button
       aria-label="Clear"
       (click)="clearInput()"
       type="button"
     >
       <mat-icon>clear</mat-icon>
     </button>

     <button mat-icon-button aria-label="Clear" type="button">
       <mat-icon>{{arrowIcon}}</mat-icon>
     </button>
   </div>

   <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (opened)="arrowIcon='arrow_drop_up'"
     (closed)="arrowIcon='arrow_drop_down'" (optionSelected)="arrowIcon='arrow_drop_down'">
     <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
       {{option.name}}
     </mat-option>
   </mat-autocomplete>
 </mat-form-field>
</form>

<!-- Copyright 2020 Google LLC. All Rights Reserved.
   Use of this source code is governed by an MIT-style license that
   can be found in the LICENSE file at http://angular.io/license -->


<form class="example-form">
  <mat-form-field class="example-full-width">
    <mat-label>Assignee</mat-label>
    <input #inputAutoComplete
           [formControl]="myControl"
           [matAutocomplete]="auto"
           #trigger="matAutocompleteTrigger"
           matInput
           type="text"
    />

    <div matSuffix style="display:flex">
      <button
        (click)="openPanel($event, trigger)"
        *ngIf=" myControl?.value!==null && myControl?.value!==''"
        aria-label="Clear"
        mat-icon-button
        type="button"
      >
        <mat-icon>clear</mat-icon>
      </button>

      <button aria-label="Clear" mat-icon-button type="button">
        <mat-icon>{{arrowIconSubject.getValue()}}</mat-icon>
      </button>
    </div>

    <mat-autocomplete #auto="matAutocomplete" (closed)="arrowIconSubject.next('arrow_drop_down')"
      (opened)="arrowIconSubject.next('arrow_drop_up')" (optionSelected)="arrowIconSubject.next('arrow_drop_down')"
      [displayWith]="displayFn">
      <mat-option *ngFor="let option of filteredOptions | async " [value]="option">
        {{option.name}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>


受让人
清楚的
{{箭头图标}}
{{option.name}
好的，当我单击“清除”图标时，它会重置表单控件并关闭面板。要解决此问题，我们可以手动打开面板。将
MatAutocompleteTrigger
与
事件一起注入方法

请参阅更新的

将
#trigger=“matAutocompleteTrigger”
添加到输入中，并将其传递给按钮
单击（）

自动完成显示示例.html

<form class="example-form">
 <mat-form-field class="example-full-width">
   <mat-label>Assignee</mat-label>
   <input
     type="text"
     matInput
     [formControl]="myControl"
     [matAutocomplete]="auto"

   />
   <div matSuffix style="display:flex">
     <button
       *ngIf="myControl!==undefined && myControl.value!==null && myControl?.value!==''"
       mat-icon-button
       aria-label="Clear"
       (click)="clearInput()"
       type="button"
     >
       <mat-icon>clear</mat-icon>
     </button>

     <button mat-icon-button aria-label="Clear" type="button">
       <mat-icon>{{arrowIcon}}</mat-icon>
     </button>
   </div>

   <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (opened)="arrowIcon='arrow_drop_up'"
     (closed)="arrowIcon='arrow_drop_down'" (optionSelected)="arrowIcon='arrow_drop_down'">
     <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
       {{option.name}}
     </mat-option>
   </mat-autocomplete>
 </mat-form-field>
</form>

<!-- Copyright 2020 Google LLC. All Rights Reserved.
   Use of this source code is governed by an MIT-style license that
   can be found in the LICENSE file at http://angular.io/license -->


<form class="example-form">
  <mat-form-field class="example-full-width">
    <mat-label>Assignee</mat-label>
    <input #inputAutoComplete
           [formControl]="myControl"
           [matAutocomplete]="auto"
           #trigger="matAutocompleteTrigger"
           matInput
           type="text"
    />

    <div matSuffix style="display:flex">
      <button
        (click)="openPanel($event, trigger)"
        *ngIf=" myControl?.value!==null && myControl?.value!==''"
        aria-label="Clear"
        mat-icon-button
        type="button"
      >
        <mat-icon>clear</mat-icon>
      </button>

      <button aria-label="Clear" mat-icon-button type="button">
        <mat-icon>{{arrowIconSubject.getValue()}}</mat-icon>
      </button>
    </div>

    <mat-autocomplete #auto="matAutocomplete" (closed)="arrowIconSubject.next('arrow_drop_down')"
      (opened)="arrowIconSubject.next('arrow_drop_up')" (optionSelected)="arrowIconSubject.next('arrow_drop_down')"
      [displayWith]="displayFn">
      <mat-option *ngFor="let option of filteredOptions | async " [value]="option">
        {{option.name}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>


受让人
清楚的
{{arrowIConObject.getValue（）}}
{{option.name}
你的StackBlitz救了我，这是我花了8-10个小时试图解决的问题！！你是我本周的英雄：）@Itay我很高兴它帮助了你。如果我删除
evt.stopPropagation（），仍然不知道为什么官方材料组件SBTW不支持这种基本功能并将
focus（）
和
openPane（）
放在
setTimout
中，零秒也可以工作。。这很有趣。
requestAnimationFrame
而不是
setTimeout（）
也会做同样的事情：）@Itay因为我需要在多个项目中使用它，所以我为此创建了新的库。你可以在这里看到