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

【问题标题】：How to fully reset mat-input with mat-autocomplete如何使用 mat-autocomplete 完全重置 mat-input
【发布时间】：2019-05-09 10:45:14
【问题描述】：

在这个Stackblitz 中，我有一个带有异步数据的垫子自动完成功能。

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

目前这个解决方案有两个问题！

清除后我没有收到任何自动建议。我想再次获得完整的自动建议。

==> 我必须再次模糊和聚焦或开始打字。

当我DON'T键入并且只是blur和refocus时，自重置后我仍然将mat-option.mat-selected类附加到面板只影响输入值。我用background-color: red; 强调了这一点。

【问题讨论】：

标签： angular angular-material

【解决方案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>

【讨论】：

哇，这很有效。我会尽快将此标记为答案！谢谢先生。
我认为将 formControl 值重置为 '' 应该可以解决问题
如果没有选择值，清除输入怎么办？在这种情况下，我尝试使用输入的blur() 事件，但在这种情况下，我无法访问自动完成值（如果选择或未选择）。有什么想法吗？