setValue之后不显示自动完成功能

Question

我正在建立一个使用Angular Material Autocomplete模块的表单。我从服务器加载选项，并使用输入过滤它们。效果很好，现在我想添加一个“清除”图标，以在需要时清除该字段。

clear选项将清除该字段，但不会再次显示自动完成选项。当我手动删除带有退格但不带有图标的输入内容时，它将显示它们。

为了“清除”该字段，我使用以下代码：

clear(control: string): void {
    this.form.get(control).setValue('');
}

我从一个mat-icon组件中调用它：

<mat-form-field>
    <input matInput type="text" ... >
    <mat-icon matSuffix (click)="clear(fieldName)" ...>
        clear</mat-icon>
</mat-form-field>
<mat-autocomplete> ... </mat-autocomplete>

其中fieldName（字符串）是我要清除的控件的名称。

这就是我过滤自动填充选项的方式：

this.filter = this.form.get(field).valueChanges.pipe(
    startWith(''), // Don't even know what this does...
    map(value => this.options.filter(option => option.name.toLowerCase().includes(value.toString().toLowerCase())))
);

我怀疑方法setValue('')内部可能有错误clear()。或者也许是我正在使用的过滤方法。

这是StackBlitz中的完整示例：

https://stackblitz.com/edit/angular-autocomplete-clear9zzmw2

Answer 1

似乎您想在单击清除按钮后立即打开选项面板。之所以不会发生这种情况，是因为一旦您选择的选项matAutocomplete，它将选择该值并关闭选项面板。为了再次打开它，您必须从文本框中删除字符或键入匹配的字符序列。

在这里，您正在手动清除该值，但是matAutoComplete打开面板并不亲切。如果你看看源代码，matAutocomplete你会发现，input/ blur/keydown事件发生的事情负责打开和关闭面板。您可以通过手动触发这些事件来实现（独立于变更检测周期）。但是最方便的方法是调用的openPanel方法matAutocomplete。

因此，让我们集中讨论如何调用的openPanel方法matAutocomplete。由于您使用matAutocomplete过的组合matInput，因此确实会导出为matAutocompleteTrigger。因此，#automcomplete="matAutocompleteTrigger"在您的matInput元素内添加如下所示。

标记

<input
  matInput
  type="text"
  #automcomplete="matAutocompleteTrigger"
  placeholder="Select something"
  formControlName="autocomplete"
  [matAutocomplete]="autocompleteStuff"
  required>

现在使用ViewChild装饰器，我们可以查询autocomplete模板变量

零件

// It will have an autocomplete component instance
@ViewChild('automcomplete') autocomplete;
//...
//...
clear(control: string): void {
    this.form.get(control).setValue('');
    // call autoComplete `openPanel` to show up options
    setTimeout(()=> {this.autocomplete.openPanel() })
}

运行演示

可以解决其他解决方案，并以编程方式专注于输入。对于相同的内容，请继续#automcomplete操作matInput，然后使用查询元素ViewChild，然后在nativeElement查询的结果上触发事件。

HTML

<input
  matInput
  type="text"
  #automcomplete
  placeholder="Select something"
  formControlName="autocomplete"
  [matAutocomplete]="autocompleteStuff"
  required>

零件

@ViewChild('automcomplete') autocomplete;
//...
//...
clear(control: string): void {
    this.form.get(control).setValue('');
    setTimeout(()=> {
      this.autocomplete.nativeElement.blur();
      this.autocomplete.nativeElement.focus();
    })
}

分叉演示