如何单击下拉箭头，它将显示所有未在mat-autocomplete中过滤的选项

Question

我对mat-autocomplete有问题。 我在mat-autocomplete中创建了一个下拉箭头，以在单击时显示所有选项。当我第一次单击它时，它会显示所有选项

但是当我选择1个选项并再次单击时，它只会显示由我的选择选项过滤的选项。

我只希望它在打开下拉菜单时显示所有选项。我该如何解决？

我的component.html

   <form class="example-form">
                <mat-form-field class="example-full-width">  
                    <input matInput type="search" aria-label="Number" matInput [formControl]="myControl2" [matAutocomplete]="auto2"  
                [hidden]="loadWithFilters&&loadWithFilters.field==='CATEGORY'" >
                <button matSuffix (click)="openAddDiag()" color="primary" class="otp-btn">
                    <mat-icon matSuffix>keyboard_arrow_down</mat-icon>
                </button>
                <mat-autocomplete #auto2="matAutocomplete"  (optionSelected)="onFilterOptionSelected($event,'CATEGORY')" >
                  <mat-option *ngFor="let option of filteredCategory | async" [value]="option.key">
                    {{option.value}}
                  </mat-option>
                </mat-autocomplete>

                </mat-form-field>
                </form>

在我的component.ts中

 this.filteredCategory = this.myControl2.valueChanges
        .pipe(
          startWith(''),
          map(value => this._filter(value,this.filterArray[2]))
        );

 _filter(value: string,array:Array<any>): Array<any> {
    const filterValue = value.toLowerCase();
    return array.filter(option =>option.value.toLowerCase().indexOf(filterValue) === 0);
  }

openAddDiag() {
    return true; 
  }

Answer 1

最简单的方法是单击箭头时清除输入：

openAddDiag() { 
    this.myControl2.setValue(""):
};

但是我不知道这是否是所需的行为，如果不是这样的话，它需要在实现自定义搜索功能时需要更复杂的结构。 由于您已明确单击箭头，因此清空输入内容并不是一个坏习惯，因为您打算进行更改（否则就不会单击）。