Question

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

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的{{1}}方法。

因此，让我们集中讨论如何调用matAutocomplete的{{3}}方法。由于您将matAutocomplete与matAutocomplete结合使用，因此它确实导出为openPanel。因此，在您的matInput元素内添加matInput，如下所示。

标记

#automcomplete="matAutocompleteTrigger"

现在使用<input matInput type="text" #automcomplete="matAutocompleteTrigger" placeholder="Select something" formControlName="autocomplete" [matAutocomplete]="autocompleteStuff" required>装饰器，我们可以查询ViewChild模板变量

组件

autocomplete

matAutocompleteTrigger

替代解决方案可以模糊处理，并以编程方式集中于输入。同样，只需在// 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上触发事件。

HTML

nativeElement

组件

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

Running Demo

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

1 个答案: