Angular Material：当用户按下回车键时隐藏自动完成面板

Question

我目前正在处理一个表格，用户可以通过按 enter 键在可编辑元素中切换。我在这方面也使用了 Angular Material。

我有一个带有 mat-autocomplete 元素的几个动态创建的输入字段的 mat-form-field。然而，我的输入键事件在这方面有点不同。

当您按下输入字段时，将打开一个面板（下拉菜单），用户可以在其中选择输入或者他可以简单地自己写，面板将提供建议（自动完成）。

如果按 Tab 键会发生什么？

如果您在键入时按 Tab，光标将移动到下一个可编辑元素，最新元素的面板（下拉列表）将关闭。

如果你按下回车键会发生什么

如果您在键入时按回车键，光标将移动到下一个可编辑元素，但是最新元素的面板（下拉菜单）保持打开状态，这会导致多个输入字段具有打开的下拉面板，即使用户已经输入了他需要的内容至。

模板：

 <tr *ngFor="let row of rows; let rowIdx = index">
            <td *ngFor="let col of columns; let colIdx = index">
                <mat-form-field class="example-full-width">
                <input  #inputs type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto"
                    (keyup.enter)="shiftFocusEnter(rowIdx, colIdx)">
                    <mat-autocomplete #auto="matAutocomplete">
                            <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
                            {{ option }}
                            </mat-option>
                        </mat-autocomplete>
                    </mat-form-field>
            </td>
      </tr>

这只是根据数组中对象的数量创建行（这里不是很重要）。

输入字段上还有一个 keyup.enter 事件，当用户在焦点位于输入字段上时按下回车键并传递行索引和列索引以获取下一个可编辑元素时，该事件就会被触发。

零件：

 shiftFocusEnter(rowIdx: number, colIdx: number) {
console.log("Enter", rowIdx, colIdx);
if(colIdx == 4 && rowIdx == 5) {
  console.log("Reached end of row");
}
else {
  colIdx = colIdx + this.columns.findIndex(c => c.editable);
  this.autocomplete.showPanel = false;
  this.focusInput(rowIdx, colIdx);
}

}

该函数接收两个参数。行索引和列索引并计算下一个可编辑元素的索引以关注该元素。

this.autocomplete.showPanel = false 这一行是为了看看我是否可以像这样简单地关闭面板，但它没有用。

this.autocomplete 是类 MatAutocomplete 的一个对象。我已经通过写作添加了这个

@Input('matAutocomplete')
autocomplete: MatAutocomplete

我需要的：

我希望垫子自动完成元素的下拉面板在按回车键后关闭。

提前致谢！

更新：

所以在工作了一下之后我发现了这个

@ViewChild('test', { read: MatAutocompleteTrigger }) test: MatAutocompleteTrigger;

+

 this.test.closePanel();

这次我可以关闭表格中第一个单元格的面板，但是其他输入字段的所有面板都将保持打开状态

原文由 Ekos 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我的用例 略有 不同，因此您的更新对我不起作用，但我找到了一个 略有 不同的解决方案来解决问题：

 @ViewChild(MatAutocompleteTrigger) autocomplete: MatAutocompleteTrigger;

然后你可以使用它来关闭下拉选项：

 this.autocomplete.closePanel();

确保同时导入 ViewChild：

 import { ViewChild } from '@angular/core';

奇迹般有效。

原文由 Kyle Krzeski 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

此 注释 提供了一种解决方案，您可以在其中直接在输入元素上获取对 matAutocompleteTrigger 的引用，以便您可以在模板中调用 closePanel()。例如：

     <input
      type="text"
      matInput
      #trigger="matAutocompleteTrigger"
      (keydown.enter)="$event.target.blur(); trigger.closePanel()"
      [formControl]="myControl"
      [matAutocomplete]="auto"
    />

原文由 Tim 发布，翻译遵循 CC BY-SA 4.0 许可协议