Установить фокус на поле ввода после щелчка в столбце таблицы (угловой 7)

Question

У меня проблема в том, что мне нужно сфокусироваться на поле столбца, на который нажали в моей таблице.Мне всегда нужно дважды щелкнуть поле, чтобы изменить содержимое поля ввода.

HTML:

<table mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="ID">
    <th mat-header-cell *matHeaderCellDef> ID </th>
    <td mat-cell *matCellDef="let elem" (click)="editCell(elem.ID)" (keydown.enter)="editCell($event.keyCode)"> 
      <span *ngIf="!editable"> {{elem.ID}} </span>
      <mat-form-field *ngIf="editable">
        <input matInput [(ngModel)]="elem.ID">
      </mat-form-field>
    </td>
  </ng-container>
  ...
</table>

Компонент:

editCell(item: any): void {
    console.log('item: ', item);

    if(!this.editable) {
      this.editable = !this.editable;
    } else if(item === 13) {
      this.editable = !this.editable;
    }
}

Я прочитал вдругие темы что-то о template reference variable и методе .focus(), но он не работает для меня.

Кто-нибудь может мне помочь?

Answer 1

Попробуйте это

(focus)="editCell('focusin')" (focusout)="editCell('focus out')"