我目前正在开发一个表格，用户可以通过按enter键在可编辑元素中进行制表.我在这张照片中也使用了棱角material .
我有一个mat form字段，其中有几个使用mat autocomplete元素动态创建的输入字段.然而，我的enter key事件在这方面的行为有点不同.
当你按下输入栏时，会打开一个面板(下拉)，用户可以在其中 Select 输入，也可以自己写，面板会给出建议(自动完成).
What happens if you press the tab key?
如果在键入时按tab键，光标将移动到下一个可编辑元素上，最新元素的面板(下拉菜单)将关闭.
What happens if you press the enter key
如果在键入时按enter键，光标将移动到下一个可编辑元素上，但最新元素的面板(下拉列表)保持打开状态，这会导致多个输入字段有一个打开的下拉面板，即使用户已经编写了所需的内容.
模板:
<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>
这只是基于数组中对象的数量创建行(这里不太重要).
还有一个 keys .在输入字段上输入事件，当用户在焦点位于输入字段时按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
What I need:
我希望mat autocomplete元素的下拉面板在按enter键后关闭.
提前谢谢！
Update:
工作了一段时间后，我发现了这个
@ViewChild('test', { read: MatAutocompleteTrigger }) test: MatAutocompleteTrigger;
+
this.test.closePanel();
这次我可以关闭表中第一个单元格的面板，但是其他输入字段的所有面板都将保持打开状态