Question

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

<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只会在调用＆＃34; test＆＃34;的实习函数时导致错误。对象

e.g。

this.test.closePanel（） =＆gt; ＆＃34; this.test.closePanel不是函数＆＃34;

EDIT1：

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

但是，如果我按下回车键，则角度自动完成材料的建议面板将不会关闭。这就是为什么我尝试手动调用closePanel（）方法但是通过使用上述方法，只有第一个单元被识别出来＃34;因此closePanel（）方法仅适用于第一个单元格 - 输入元素

编辑2：

几周前我设法解决了这个问题，但是如果有人遇到这个问题就忘了更新。

这就是我的方法现在的样子：

    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.focusInput(rowIdx, colIdx);
      this.autocompletes.toArray().forEach(el => {
        el.closePanel();
      })
    }
  }

  focusInput(rowIdx: number, colIdx: number) {
    console.log("FOCUS ON", rowIdx, colIdx);
      let inputEls = this.inputs.toArray();
      let flatIdx = (rowIdx * this.columns.length) + colIdx;
      inputEls[flatIdx].nativeElement.focus();
  }

获取多个元素的参考

0 个答案: