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

8 浏览
0 Comments

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

我正在做一个表格，用户可以通过按下回车键来在可编辑的元素之间切换。我还在其中使用了Angular Material。

我有一个带有多个动态创建的输入字段和mat-autocomplete元素的mat-form-field。但是在这种情况下，我的回车键事件会有些不同。

当您点击输入字段时，会打开一个面板（下拉菜单），用户可以选择输入，或者可以自己输入，面板会提供建议（自动完成）。

如果按下Tab键会发生什么？

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

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

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

模板：


            
                             
                
                    
                            
                            {{ option }}

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

输入字段还有一个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

我需要什么：

我希望在按下回车键后，mat-autocomplete元素的下拉菜单面板关闭。

提前感谢！

更新：

所以在工作一段时间后，我找到了这个

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

+

this.test.closePanel();

这次我能够关闭表格中第一个单元格的面板，但是其他输入字段的面板仍然保持打开状态。

0