javascript - Angular Sett inputmarkøren til neste input, PS: neste input-tag vil bli lagt til dynamisk ved keyEnter på forrige input-klikk

Jeg bruker en for-løkke med input-tagger. Brukeren skriver noe inn, og når enter trykkes, sendes kommandoen og den nåværende for-løkken legges til med en ny input-tag. Jeg vil at markøren skal flyttes til neste input. Det finnes mange løsninger der man henter srcElement og flytter fokus til neste element, men her legges neste element til dynamisk.

shell.component.html

<div class="shell">
    <table>
        <tr *ngFor="let text of shellText">
            <ng-container *ngIf="getType(text['type']);else input">
                <td style="width: 2%">{{text['preText']}}</td>
                <td>{{text['text']}}</td>
            </ng-container>
            <ng-template #input>
                <td style="width: 2%">{{text['preText']}}</td>
                <td><input [readonly]="text['type'] == 'command'" class="shell-input"
                        (keyup.enter)="onEnter($event,text['line'])" [(ngModel)]="text['text']" mat-input type="text" /></td>
            </ng-template>
        </tr>
    </table>
</div>

shell.component.ts

  onEnter(event, line) {
    if (this.shellText[line - 1].text.trim().endsWith(':')) {
      this.shellText.push({ 'type': CLASSES['CONTINUE_COMMAND'], 'line': line + 1, 'preText': '', 'text': '    ' },)
    } else {
      this.shellText.push({ 'type': CLASSES['CURRENT_COMMAND'], 'line': line + 1, 'preText': '>>>', 'text': '' },)
    }
    this.shellText[line - 1]['type'] = CLASSES['COMMAND']

    setTimeout(() => {
      this.setFocus(event)
    }, 2000);
  }


  setFocus(event) {
    debugger
    let element = event.srcElement.nextElementSibling; // get the sibling element
    console.log(element)
    if (element == null)  // check if its null
      return;
    else
      element.focus();   // focus if not null
  }

Merk: Jeg prøver å lage et Python-skjell

Svar #1

shell.component.ts

  setFocusevent) {
    let element = event.srcElement.parentElement.parentElement.nextElementSibling.lastElementChild.firstElementChild; // get the sibling element
    if (element == null)  // check if its null
      return;
    else
      element.focus();   // focus if not null
  }

1. Du får først referansen til <input>-taggen
2. Deretter får du dets overordnede element som er <td>
3. Så går du videre opp til <tr>
4. Deretter refererer du til den neste <tr> som vil bli opprettet dynamisk
5. Deretter får du tilgang til det siste elementet, som vil være den siste <td>
6. Deretter peker du på ditt ønskede <input>-element og legger til fokus