1个极简主义者：

Question

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

以下是我在尝试实施该功能时对live example所做的事情。

Answer 1

在模板中

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

<input #inputAutoComplit>

以ts

@ViewChild(MatAutocompleteTrigger) inputAutoComplit: MatAutocompleteTrigger;


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

Answer 2

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

因为按钮点击结束焦点从输入字段变回到按钮，所以自动完成立即隐藏

选项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)
}

Answer 3

材料文档应更清晰。尽管可以使用各种体操例程来实现此功能（例如，使用@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的变量。该触发指令传递给每个mat-option上的click方法，每次从菜单中选择一个选项时，该方法就会触发。指令contains two pertinent methods。在这里我们称为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(ev: Event, trigger: MatAutocompleteTrigger) {
    event.stopPropagation();
    trigger.openPanel();
}

在这里，我们将指令和事件对象传递给组件的.ts文件中的函数，并执行与第一种方法完全相同的逻辑。如果担心毯子separation of concerns，请按照这种方式进行操作。对于这样的小型工作，我更喜欢极简主义的方法，但我认为每种方法各有千秋。

使用open openPanel（）方法打开matAutocomplete

3 个答案:

1个极简主义者：

2明确：