Javascript 角度材质：当用户按enter键时隐藏自动完成面板

我目前正在处理一个表格，在这个表格中，用户可以按enter键通过可编辑元素进行制表。我也在这里使用角材料

我有一个mat表单字段，其中包含几个使用mat autocomplete元素动态创建的输入字段。然而，我的enter key事件在这方面的作用有点不同

当您按下输入字段时，将打开一个面板（下拉），用户可以在其中选择输入，也可以自己编写，面板将给出建议（自动完成）

如果按tab键会发生什么情况？

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

如果按enter键会发生什么情况

如果在键入时按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>

}

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

行this.autocomplete.showPanel=false是为了查看是否可以像这样简单地关闭面板，但它不起作用

这个.autocomplete是类MatAutocomplete的对象。我通过写作补充了这一点

@Input('matAutocomplete')
autocomplete: MatAutocomplete

我需要什么：

我希望mat autocomplete元素的下拉面板在按enter键后关闭

提前谢谢

更新：

工作了一段时间后，我发现了这个

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

+

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

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

@ViewChild(MatAutocompleteTrigger) autocomplete: MatAutocompleteTrigger;

然后，您可以使用此选项关闭下拉选项：

this.autocomplete.closePanel(); 

确保还导入ViewChild：

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

工作起来很有魅力。

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

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

//这是我的解决方案ios/android面板未隐藏完成按钮虚拟//
{{option.name}
OcuPanelAuto（抄送：MatAutocompleteTrigger）{
setTimeout（函数a（）{
cc.closePanel（）；
}, 130);
}

您应该使用

@ViewChildren

而不是

@Input

，我完全不知道这是我需要在代码中引用的触发器。谢谢大家!<代码>（模糊）=“trigger.closePanel（）”效果很好！但是，如果您有多个自动完成控件，请为每个控件指定不同的触发器名称，即

\triggerName=“matAutocompleteTrigger”

，

\triggerLastname=“matAutocompleteTrigger”

，然后添加

（blur）=“triggerName.closePanel（）”

和

（blur）=“triggerLastname.closePanel（）”

分别。如果在使用材质自动完成的输入上使用patchValue或setValue，面板将在之后保持打开状态。此解决方案非常适合在更新值后关闭该面板。谢谢

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

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

// This is my solution  ios/android panel not hide on done button virtual // 


<input type="text" placeholder="{{lbl.TipDoc}}"
class="form-control ui-inputtext ui-widget autocomp"
 #trigautoTipDoc ="matAutocompleteTrigger"
 aria-label="name" matInput                                        (blur)="OcuPanelAuto(trigautoTipDoc);"
formControlName="tipDocLbl" [matAutocomplete]="autoTipDoc" >
<mat-autocomplete #autoTipDoc="matAutocomplete" role="combobox">
<mat-option  *ngFor="let option of tipDocFiltObs | async"
                                                            [value]="option.name">
 {{option.name}}
</mat-option>
</mat-autocomplete>


OcuPanelAuto(cc: MatAutocompleteTrigger) {
        setTimeout(function a() {
            cc.closePanel();
        }, 130);
    }