Javascript 角度变化以反应形式集中于进入

我创建了一个表和一个按钮，该按钮在表内创建带有输入的动态行。当我在第一个输入中按enter键时，我想创建新行（我已经创建了），但无法在新输入中聚焦。这是我试过的

<input type="text" class="form-control" placeholder="Product Code" formControlName="product_code" tabindex="{{i+1}}" (keyup.enter)="autoProduct($event)">

---

我试过了，也试过了，但没能成功。请提供帮助。

您可以使用

ViewChildren

private inputToFocus: any;
@ViewChildren('inputToFocus') set inputF(inputF: any) {
  this.inputToFocus = inputF
  this.inputToFocus.first.nativeElement.focus();
}

在

输入

标记中添加

#inputofocus

<代码>

编辑 我不知道如何添加新输入，但可以使用以下代码

.ts:

.html：

<div *ngFor="let count of counts; let i=index">
  <input type="text" class="form-control" placeholder="Product Code" tabindex="{{i+1}}" (keyup.enter)="autoProduct($event)" #inputToFocus>
</div>

---

请注意，我现在使用的是

.last

。

我提供的示例代码允许您控制表单中的焦点。每次按enter键或向下箭头键时，此示例代码将聚焦下一个字段。您可以根据自己的需要进行定制。 此示例代码显示它也可用于引导

基本上，任何输入字段都记录在表中。然后，由您来决定您想要关注哪一个。 如果动态添加输入字段，则表将更新

我还没有找到更好的方法

editor.component.html

{{item.designation}
{{item.type}
{{item.value}编号：'1.1-3'}
{{item.value | number}}
{{item.commentaire}}

使用此选项时，第一个输入会聚焦，但添加新输入时，不会改变聚焦。

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 6';
  counts = [1];
  private inputToFocus: any;
  @ViewChildren('inputToFocus') set inputF(inputF: any) {
    this.inputToFocus = inputF
    this.inputToFocus.last.nativeElement.focus();
  }

  autoProduct(event) {
    if (event.keyCode === 13) {
      event.preventDefault();
      const inputs =
        Array.prototype.slice.call(document.querySelectorAll('input'));
      const index =
        (inputs.indexOf(document.activeElement) + 1) % inputs.length;
      this.addProduct(index);
      const input = inputs[index];
      input.focus();
      input.select();
    }
  }
  addProduct(i) {
     this.counts.push(i)
  }
}

<div *ngFor="let count of counts; let i=index">
  <input type="text" class="form-control" placeholder="Product Code" tabindex="{{i+1}}" (keyup.enter)="autoProduct($event)" #inputToFocus>
</div>