angular - 在二维数组中使用@viewchild

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 检索元素。然后，您可以使用 QueryList 的 find 方法获取具有特定 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 或其他早期事件中填充。您可以订阅 this.boxes.changes 以在列表准备就绪时收到通知。