Angular2动态输入字段在输入更改时失去焦点

Question

我正在制作一个动态的表格.A Field有一个值列表.每个值都由一个字符串表示.

export class Field{
    name: string;
    values: string[] = [];
    fieldType: string;
    constructor(fieldType: string) {this.fieldType = fieldType;}
}

我的组件中有一个函数,它为字段添加了一个新值.

addValue(field){
    field.values.push("");
}

值和按钮在我的HTML中显示如下.

<div id="dropdown-values" *ngFor="let value of field.values; let j=index">
    <input type="text" class="form-control" [(ngModel)]="field.values[j]" [name]="'value' + j + '.' + i"/><br/>
</div>
<div class="text-center">
    <a href="javascript:void(0);" (click)="addValue(field)"><i class="fa fa-plus-circle" aria-hidden="true"></i></a>
</div>

只要在输入值中写入一些文本,输入就会失去焦点.如果我向字段添加许多值,并且我在一个值输入中写入一个字符,则输入将失去焦点,并且字符将写入每个输入.

Answer 1

当数组是基本类型(在您的情况下是String数组)时会发生这种情况.这可以通过使用来解决TrackBy.因此,更改模板以匹配以下内容:

<div *ngFor="let value of field.values; let i=index; trackBy:trackByFn">
    <input type="text" [(ngModel)]="field.values[i]"  /><br/>
</div>
<div>
    <button (click)="addValue(field)">Click</button>
</div>

并在ts文件中添加函数trackByFn,该函数返回index值的唯一值:

trackByFn(index: any, item: any) {
   return index;
}

这是关于同一问题的链接,除了AngularJS的问题,但问题与您的问题相对应.最重要的摘录自该页面:

您正在重复数组,并且您正在更改数组的项目(请注意,您的项目是字符串,它们是JS中的基元,因此比较"按值").由于检测到新项目,因此从DOM中删除旧元素并创建新元素(显然不会获得焦点).

使用TrackByAngular可以根据唯一标识符跟踪已添加(或删除)的项目,并仅创建或销毁更改的内容,这意味着您不会失去对输入字段的关注:)

如链接中所示,您还可以修改数组以包含唯一且[(ngModel)]="value.id"用于对象的对象,但这可能不是您所需要的.