Question

表格版本：11.3.2

Angular版本：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

我没有看到你添加新行的时间。无论如何，你想做一个＆＃34;焦点＆＃34;使用ViewChildren创建的输入recient（我一般写一个例子，而不是你的特定代码）

如果您的输入有参考变量

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

NOTA：我使用了＃34; tipical＆＃34;构造.pipe（takeWhile（（）=＆gt; this.isAlive））轻松取消订阅一个observable如果在我的组件中我有一个

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

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

如何以编程方式关注ngx-datatable中的列/行？

1 个答案: