Angular 使用ngFor插入新输入时的焦点问题

我有几个要求：

将字符串数组的每个项加载到输入中

在输入列表的末尾始终有一个空输入，以便用户可以添加到数组中

每次这些输入中的一个发生更改时，将更改发回服务器

我很难做到这一点。我得到的最接近的结果是：

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
  <div *ngFor="let title of titles; let i = index">
    <label>Box {{i}}</label>
    <input type="text" [id]="'box' + i"
    [ngModel]="titles[i]" 
    (keyup)="onKeyUp($event.target, i)"><br />
  </div>
  `
})
export class AppComponent {
  titles = ['1', '2', ''];

  onKeyUp(target, index){
    this.titles[index] = target.value;
    if(this.titles.length-1 === index){
      this.titles.push('');
      target.value = '';
    }
    document.getElementById('box' + index).focus();
  }
}

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
模板：`
框{{i}


`
})
导出类AppComponent{
标题=['1'，'2'，''；
onKeyUp（目标、索引）{
this.titles[索引]=target.value；
if（this.titles.length-1==索引）{
这个。标题。推（“”）；
target.value=''；
}
document.getElementById（'box'+index）.focus（）；
}
}

这里唯一的错误是，焦点需要放在用户正在键入的输入上，而不是在用户开始键入空输入时移到列表中的输入。有没有关于如何解决这个问题的建议

请点击这里：

编辑

多亏了Vega下面的回答，我想出了这个完美的解决方案：

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
  <div *ngFor="let title of titles; let i = index; trackBy: trackByFn">
    <input type="text"
    [(ngModel)]="titles[i]" 
    (ngModelChange)="onChange($event, i)"><br />
  </div>
  `
})
export class AppComponent {
  titles = ['1', '2', ''];

  trackByFn(item, id){
    return item
  }

  onChange(target, index){
    if(this.titles.length-1 === index){
      this.titles.push('');
    }
    console.log(this.titles);
  }
}

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
模板：`


`
})
导出类AppComponent{
标题=['1'，'2'，''；
trackByFn（项目，id）{
退货项目
}
onChange（目标、索引）{
if（this.titles.length-1==索引）{
这个。标题。推（“”）；
}
console.log（this.titles）；
}
}

---

当我切换到数据绑定的ngModel时，使用keyup事件时，它停止正常启动，但在切换到ngModelChange后，一切都很好。

您应该在*ngModel上添加trackBy选项，用于：

Angular使用对象标识跟踪内部的插入和删除 迭代器并在DOM中重现这些更改。 ... 要自定义默认跟踪算法，NgForOf支持trackBy 选项trackBy接受一个有两个参数的函数：index和 项目。如果给定trackBy，则角度轨迹将根据返回值进行更改 函数的类型

---

谢谢，trackBy功能是我所缺少的。在我添加它之后，切换到一个数据绑定的ngModel，并更改为ngModelChange而不是keyup，它按照我需要的方式工作。

<div *ngFor="let title of titles; let i = index; trackBy: trackByFn">