使用open openPanel（）方法打开matAutocomplete

Question

我正在使用Angular Material的matAutocomplete组件，根据docs，有一种方法可以使用openPanel（）/ closePanel（）方法打开/关闭自动完成面板。关于如何将其集成到已经工作的示例中的任何建议？

这是我在尝试实现该功能时使用实时示例所做的操作。

Answer 1

在模板中

<button (click)='openPanel($event)'>Open</button>

<input #inputAutoComplit>

在ts

@ViewChild(MatAutocompleteTrigger, {read: MatAutocompleteTrigger}) inputAutoComplit: MatAutocompleteTrigger;


openPanel(evt): void {
  evt.stopPropagation();
  this.inputAutoComplit.openPanel();
}

Answer 2

材料文档应更清晰。尽管可以使用各种体操例程来实现此功能（例如，使用@ViewChild操纵文档对象或创建事件侦听器），但对我而言，它可以归结为以下两种方式：

1个极简主义者：

<mat-form-field>
    <input #nameInput
           matInput
           formControlName="name"
           #trigger="matAutocompleteTrigger"  
           [matAutocomplete]="autoName">

    <mat-autocomplete #autoName="matAutocomplete">

        <mat-option *ngFor="let o of suggestionOpts"
                    [value]="o"
                    (click)="$event.stopPropagation(); trigger.openPanel()">{{o}}</mat-option>

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

在这里，我们将MatAutoCompleteTrigger指令附加到输入，并将其分配给名为的变量trigger。此触发指令将传递给each的click方法，每次mat-option从菜单中选择一个选项时都会触发。该指令包含两个相关方法。我们在这里打电话openPanel。我们调用stopPropagation该$event对象以防止本机方法做任何意外的事情。

2明确的：

.html

<mat-form-field>
    <input #nameInput
           matInput
           formControlName="name"
           #trigger="matAutocompleteTrigger"  
           [matAutocomplete]="autoName">

    <mat-autocomplete #autoName="matAutocomplete">

        <mat-option *ngFor="let o of suggestionOpts"
                    [value]="o"
                    (click)="selectionMade($event, trigger)">{{o}}</mat-option>

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

.ts

import { MatAutocompleteTrigger } from '@angular/material/autocomplete';

...

selectionMade(event: Event, trigger: MatAutocompleteTrigger) {
    event.stopPropagation();
    trigger.openPanel();
}

在这里，我们将指令和事件对象传递给组件的.ts文件中的函数，并执行与第一种方法完全相同的逻辑。如果关注点分离是一个关注点，请以这种方式进行操作。对于像这样的小型工作，我更喜欢极简主义的方法，但是我想每种方法各有千秋。

Answer 3

请添加stopPropagation或使用setTimeout延迟openPanel，如下所示。

由于在单击按钮时，焦点从输入字段更改为返回到ur按钮，因此自动完成功能立即隐藏

选项1：停止传播

<button (click)="openAutocomplete($event)">toggle autocomplete (1 way)</button>
...
openAutocomplete(evt) {
  evt.stopPropagation()
  this.autoTrigger.openPanel();
}

选项2-SetTimeout

openAutocomplete() {
  setTimeout(() => {
    this.autoTrigger.openPanel();
  }, 0)
}