您如何以编程方式关注 ngx-datatable 中的 column/row？

Question

Table版本：11.3.2

Angular版本：5.2.4

我在 table 的底部添加一个新行进行编辑，当用户单击选项卡时他们在最后一个 column/row 但是我无法将焦点设置到新行的第一列。关于如何以编程方式关注新行的第一列有什么建议吗？

我的 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 创建的输入 recient 做一个 "focus"（我写了一个一般的示例，而不是您的特定代码）

如果您的输入有参考变量

<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--->
}

注意：我使用 "tipical" 构造 .pipe(takeWhile(() => this.isAlive)) 如果在我的组件中我有一个

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

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

您如何以编程方式关注 ngx-datatable 中的 column/row？

How do you programmatically focus on a column/row in ngx-datatable?

autofocus

ngx-datatable

angular