在Angular Table中，当我们在第一行的最后一个单元格中输入值，然后按enter键时，如何设置焦点移动到下一行

import { Component, ElementRef, Renderer2, ViewChild } from '@angular/core';

@Component({
  selector: 'app-table',
  template: `
    <table>
      <tr>
        <td id="cell1" (keydown.enter)="moveFocus($event, 'cell2')">Cell 1</td>
        <td id="cell2" (keydown.enter)="moveFocus($event, 'cell3')">Cell 2</td>
        <<td id="cell3" (keydown.enter)="moveFocus($event, 'cell4')">Cell 3</td>
      </tr>
      <tr>
        <td id="cell4" (keydown.enter)="moveFocus($event, 'cell5')">Cell 4</td>
        <td id="cell5" (keydown.enter)="moveFocus($event, 'cell6')">Cell 5</td>
        <td id="cell6" (keydown.enter)="moveFocus($event, 'cell7')">Cell 6</td>
      </tr>
      <tr>
        <td id="cell7" (keydown.enter)="moveFocus($event, 'cell8')">Cell 7</td>
        <td id="cell8" (keydown.enter)="moveFocus($event, 'cell9')">Cell 8</td>
        <td id="cell9" (keydown.enter)="moveFocus($event, 'cell10')">Cell 9</td>
      </tr>
    </table>
  `,
})
export class TableComponent {
  @ViewChild('table') table: ElementRef;

  constructor(private renderer: Renderer2) {}

  moveFocus(event: KeyboardEvent, nextCellId: string) {
    if (event.key === 'Enter') {
      event.preventDefault();
      const nextCell = this.table.nativeElement.querySelector(`#${nextCellId}`);
      if (nextCell) {
        this.renderer.selectRootElement(nextCell).focus();
      }
    }
  }
}