Как программно сосредоточиться на столбце / строке в ngx-datatable?

Question

Настольная версия: 11.3.2

Угловая версия: 5.2.4

Я добавляю новую строку для редактирования в нижней части таблицы, когда пользователь нажимает на вкладку, И они находятся в последнем столбце / строке, однако я не могу установить фокус на первый столбец новой строки. Любой совет, как я могу программно сфокусироваться на первом столбце новой строки?

Мой HTML-код:

<div class="haulsScreen">
  <h2 class="mat-h2">Hauls</h2>
  <ngx-datatable
    #mydatatable
    class="material"
    [headerHeight]="50"
    [limit]="20"
    [columnMode]="'force'"
    [footerHeight]="50"
    [rowHeight]="'auto'"
    [rows]="rows">
    <ngx-datatable-column name="Haul">
      <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row">

        <input
          autofocus
          (blur)="updateValue($event, 'haul', rowIndex)"
          type="text"
          [value]="value"
        />
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="Gender">
      <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row" let-value="value">
        <select
          (blur)="updateValue($event, 'gender', rowIndex)"
          [value]="value">
          <option value="male">Male</option>
          <option value="female">Female</option>
        </select>
      </ng-template>
    </ngx-datatable-column>

  </ngx-datatable>
</div>

и мой файл TS:

import { Component, HostListener, OnInit } from '@angular/core';

@Component({
  selector: 'app-hauls',
  templateUrl: './hauls.component.html',
  styleUrls: ['./hauls.component.scss']
})
export class HaulsComponent implements OnInit {
  rows = [];
  lastRowLastColumn = false;

  constructor(private obsStateService: ObsStateService) {
    this.fetch(data => {
      this.rows = data;
    });

  }

  @HostListener('window:keyup', ['$event'])
    keyEvent(event: KeyboardEvent) {

      if (event.key === 'Tab' && this.lastRowLastColumn) {
        this.rows = [...this.rows,{}];
      }
  }

  ngOnInit() {
  }

  fetch(cb) {
    const req = new XMLHttpRequest();
    req.open('GET', `assets/data.json`);

    req.onload = () => {
      cb(JSON.parse(req.response));

    };

    req.send();
  }


  updateValue(event, cell, rowIndex) {
    // console.log('inline editing rowIndex', rowIndex);
    // console.log('inline editing cell', cell);
    // console.log(event);

    this.rows[rowIndex][cell] = event.target.value;
    this.rows = [...this.rows];
    if(cell==='gender' && (this.rows.length-1) == rowIndex)
      this.lastRowLastColumn = true;
    else
      this.lastRowLastColumn = false;

    // console.log('UPDATED!', this.rows[rowIndex][cell]);


  }
}

Answer 1

Я не вижу, когда вы добавляете новую строку. В любом случае, вы хотите сделать «фокус» получателя ввода, созданного с использованием ViewChildren (я пишу пример в целом, но не ваш конкретный код)

, если ваш ввод имеет ссылочную переменную

<input #myinput>

Вы можете иметь в свой component.ts

//See that I put QueryList<ElementRef>
@ViewChildren('myinput') childChildren: QueryList<ElementRef>;
adding:boolean=false; //<--a variable "adding"

//In a ngOnAfterViewInit, we subscribe to "this.childChildren.changes"
  ngAfterViewInit() {
    this.childChildren.changes
      .pipe(takeWhile(() => this.isAlive))
      .subscribe(children => {
      //I used a variable adding, because I only want to focus when I want
      //not in any change of the input
      if (this.adding) {
        this.adding = false;
        setTimeout(() => {
          children.last.nativeElement.focus();
        }, 0)
      }
    });
  }

Когда вы хотите добавить и сфокусироваться, например, в функции

addRow()
{
    this.adding=true;
    <!---some to add the row--->
}

ПРИМЕЧАНИЕ: я использовал "типичную" конструкцию .pipe (takeWhile (() => this.isAlive)) для простой отписки наблюдаемого, если в моем компоненте у меня есть

  //Early in the code
  isAlive:boolean=true;

  //In a ngOnDestroy
  ngOnDestroy() {
    this.isAlive = false;
  }