Question

我想在HTML中打印10x10网格。为此，我在我的html中使用两个ngFor。在我的TypeScript组件中，我想用@ViewChild访问该表的单元格，以将光标的插入符号放入其中。我知道如何使用document.getElementById访问它，但我需要@ViewChild的帮助。

这是我的HTML：

<div class="row" *ngFor="let row of crosswordDataService?.grid?.boxArray; let i = index">
  <input class="number" value="{{i+1}}" disabled>
  <div class="cell" *ngFor="let col of crosswordDataService?.grid?.boxArray; let j = index">
    <input type="text" id="{{i}}_{{j}}" class="box" maxLength="1" }">
  </div>
</div>

以下是document.getElementById

的代码

public setCaretPosition(idElement: string): void {
    const ctrl: HTMLElement = document.getElementById(idElement);
    const pos: number = (ctrl as HTMLInputElement).value.length;
    if ((ctrl as HTMLInputElement).setSelectionRange) {
        (ctrl as HTMLInputElement).focus();
        (ctrl as HTMLInputElement).setSelectionRange(pos, pos);
    }
}

Answer 1

您可以使用ViewChildren访问template reference variable的元素，如this stackblitz所示。

在输入元素上设置模板引用变量#box：

<div class="row" *ngFor="let row of crosswordDataService?.grid?.boxArray; let i = index">
  <input class="number" value="{{i+1}}" disabled>
  <div class="cell" *ngFor="let col of crosswordDataService?.grid?.boxArray; let j = index">
    <input #box type="text" id="{{i}}_{{j}}" class="box" maxLength="1">
  </div>
</div>

并在代码中使用@ViewChildren检索元素。然后，您可以使用find的{{1}}方法获取具有特定QueryList的输入元素。

id

注意：export class AppComponent { @ViewChildren("box") boxes: QueryList<ElementRef>; public setCaretPosition(i: number, j: number): void { const id = `${i}_${j}`; const inputRef = this.boxes.find(box => box.nativeElement.id === id); const input = inputRef.nativeElement as HTMLInputElement; input.focus(); ... } }或其他早期事件中可能尚未填充QueryList。您可以订阅ngOnInit以在列表准备就绪时收到通知。

在二维数组

1 个答案: