小编Eko*_*kos的帖子

我目前正在制作一个表格,用户可以通过按Enter键来浏览可编辑元素.我也在这里使用Angular Material.

我有一个mat-form-field,带有几个动态创建的输入字段和mat-autocomplete元素.但是我的回车键事件在这方面有点不同.

当您按下输入字段时,将打开一个面板(下拉列表),用户可以在其中选择输入,或者他可以简单地自己编写,面板将提供建议(自动完成).

如果按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>

这只是根据数组中对象的数量创建行(这里不太重要).

输入字段上还有一个keyup.enter事件,当用户按下输入时会触发,同时焦点位于输入字段上,并传递行索引和列索引以获取下一个可编辑元素.

零件:

shiftFocusEnter(rowIdx: number, colIdx: number) {
console.log("Enter", rowIdx, colIdx);  
if(colIdx == 4 && rowIdx == 5) {
  console.log("Reached end of …

我有一堆动态创建的输入字段

<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 #test 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>

我想在我的课程中访问这些输入字段。我目前正在使用

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

访问它。但是，这只会给我通过循环创建的所有输入字段的第一个输入字段。

使用 ViewChildren 只会在调用“test”对象的内部函数时导致错误

例如

this.test.closePanel() => "this.test.closePanel 不是函数"

编辑1：

为了提供更多信息，我有一个动态创建的表（行和列）。我的表目前充满了多个输入字段。我可以通过按回车键来浏览这些输入字段。

但是，如果我按回车键进行 Tab，角度自动完成材料的建议面板将不会关闭。这就是为什么我尝试手动调用 closePanel() 方法，但是通过使用上述这种方法，只有第一个单元格被“识别”，因此 closePanel() 方法仅适用于第一个单元格 - 输入元素

编辑2：

几周前我设法解决了这个问题，但忘记更新，以防有人也遇到这个问题。 …

我已经安装了VS Code的Chrome调试器扩展程序来调试Angular项目。调试本身可以正常工作，但是我无法在监视面板中监视任何变量。它一直说“不可用”，即使它们应该存在。

我目前正在.net核心2.0中创建一个Web Api,我无法让我的连接字符串工作.

我已将我的连接字符串放入appsettings.json并在startup.cs中加载它

Appsettings.json

{
"Logging": {
"IncludeScopes": false,
"Debug": {
  "LogLevel": {
    "Default": "Warning"
  }
},
"Console": {
  "LogLevel": {
    "Default": "Warning"
  }
},
"ConnectionStrings": {
  "DatabaseConnection": "Data Source=VMDEVSLN-EOE\\SQLEXPRESS;Initial Catalog=EmployeeDB;Integrated Security=True"
  }
 }
}

Startup.cs

        public Startup(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddMvc();
        var connection = Configuration.GetConnectionString("DatabaseConnection");
        services.AddDbContext<DatabaseContext>(options => options.UseSqlServer(connection)); …