我目前正在处理一个表格,用户可以通过按enter键来切换可编辑的元素。我也使用了Angular Material。
我有一个mat-form-field,其中有几个动态创建的输入字段,并带有mat-autocomplete元素。然而,我的回车键事件的行为有点不同。
当你按下输入栏时,一个面板将打开(下拉),用户可以在其中选择输入,或者他可以简单地写自己,面板将给予建议(自动完成)。
如果按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();
这一次,我能够关闭面板的第一个单元格在表中,但所有的面板的其他输入领域将保持开放
4条答案
按热度按时间6jjcrrmo1#
我的用例 * 略有 * 不同,所以你的更新对我不起作用,但我发现了一个 * 略有 * 不同的解决方案:
然后,您可以使用此选项关闭下拉选项:
确保同时导入ViewChild:
很管用。
s6fujrry2#
这条注解提供了一个解决方案,可以直接在input元素上获取对matAutocompleteTrigger的引用,这样就可以在模板中调用closePanel()。例如:
euoag5mw3#
gwo2fgha4#
您还可以使用autocomplete元素发出的
optionSelected
事件。像这样定义autocomplete元素:然后
onAutocompleteSelect
函数如下所示:现在,当选择自动完成面板中的选项时,面板将自动关闭。