带有箭头键的导航不适合输入ROADONLY

Question

我已经建立了一个带4列的表。 1列是文本，其他3列是设置为ReadOnly的输入。对于此表，我写了一个arrowkeycodeNecodeNavigation。该操作运行到目前为止。但是，如果我在右侧的第一行中导航，我将无法左转。您知道当我在Readonly字段上时，我如何才能向左导航？

// html

  <td
          [formGroupName]="rowIndex"
          *ngFor="let column of displayedColumns; let columnIndex = index;"
        >
          <div
            *ngIf="attributesWithFormControls.includes(column.attribute); else otherColumns"
          >
            <span>
              <label>
                <input
                  style="background-color: yellow"
                  class="current-cell"
                  [id]="'row-' + rowIndex + '-col-' + columnIndex"
                  type="text"
                  arrow-div
                  [formControl]="rowControl.get(column.attribute)"
                  (focus)="onFocus($event)"
                  readonly
                />
              </label>
            </span>
          </div>
          <ng-template #otherColumns>
            <div
              class="current-cell"
              tabindex="0"
              [id]="'row-' + rowIndex + '-col-' + columnIndex"
              arrow-div
            >
              Here is a Number
            </div>
          </ng-template>
        </td>

// ts

 /**
   * Use arrowKey
   * @param object any
   */
  move(object) {
    console.log('move', object);

    const id = object.element.nativeElement.id;

    console.log(id);

    const arr = id.split('-');
    let row: number = Number(arr[1]);
    let col: number = Number(arr[3]);

    switch (object.action) {
      case 'UP':
        --row;
        break;
      case 'DOWN':
        ++row;
        break;
      case 'LEFT':
        --col;
        break;
      case 'RIGTH':
        ++col;

        if (col >= this.columns.length) {
          // move past last column
          col = 0; // go to column at zero index  (1st column)
          ++row; // go to next row
        }

        break;
    }
    this.setFocus(row, col);
  }

  onFocus(event: FocusEvent): void {
    console.log('onFocus', event.target);

    const target = event.target as HTMLElement;

    if (target.tagName === 'INPUT') {
      this.currentInputInFocus = target;
    }
  }

  private setFocus(row: number, col: number) {
    console.log(`setFocus [row:${row}] [col:${col}]`);
    const newElementToFocusOn = document.getElementById(
      `row-${row}-col-${col}`
    );
    if (newElementToFocusOn) {
      console.log('focusing');
      this.currentInputInFocus = newElementToFocusOn;
      this.currentInputInFocus.focus();
    }
  }

这是我在Stackblitz中的工作： https://stackblitz.com/edit/angular-wmfjhh-sj39il?file=papp%2ftable-basic-example.html