Question

在此Stackblitz中，我有一个带有异步数据的自动填充功能。

当(optionSelected)触发时（当我单击一个选项时），我希望像新渲染/初始化的那样完全重置该字段。

当前此解决方案存在两个问题！

通关后，我没有得到任何自动建议。我想再次获得完整的自动建议。

==>我必须再次模糊并聚焦或开始输入。

当我不要键入并且只是模糊和重新聚焦时，自面板以来我仍然附加了mat-option.mat-selected类重置仅影响输入值。我用background-color: red;突出了这一点。

Answer 1

您需要使重置功能如下所示

resetAutoInput(optVal, trigger: MatAutocompleteTrigger, auto: MatAutoComplete) {
    setTimeout(_ => {
      auto.options.forEach((item) => {
        item.deselect()
      });
      this.myControl.reset('');
      trigger.openPanel();
      }, 100);
  }

，并且在您的HTML代码中将是

<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" #trigger="matAutocompleteTrigger" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="resetAutoInput($event.option.value, trigger, auto);">
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>

如何使用mat-autocomplete完全重置mat-input

1 个答案: