Angular2 动态输入字段在输入更改时失去焦点 [英] Angular2 Dynamic input field lose focus when input changes

问题描述

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

导出类字段{名称:字符串；值:字符串[] = [];字段类型:字符串；构造函数(字段类型:字符串){this.fieldType = fieldType;}}

我的组件中有一个函数可以为该字段添加一个新值.

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

值和按钮在我的 HTML 中是这样显示的.

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

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

解决方案

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

<input type="text" [(ngModel)]="field.values[i]"/><br/>
<div><button (click)="addValue(field)">点击</button>

并在 ts 文件中添加函数 trackByFn，它返回值的(唯一)index:

trackByFn(index: any, item: any) {回报指数；}

这是一个链接，大致相同问题，除了问题是针对 AngularJS 的，但问题对应于您的问题.该页面最重要的摘录:

<块引用>

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

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

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

I'm making a dynamic form. A Field has a list of values. Each value is represented by a string.

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

I have a function in my component which adds a new value to the field.

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

The values and the button are displayed like this in my 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>

As soon as I write some text in an input of a value, the input loses focus. If I add many values to a field and I write a character in one the values input, the input lose focus and the character is written in every input.

解决方案

This happens when the array is a primitive type, in your case a String array. This can be solved by using TrackBy. So change your template to match the following:

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

and in the ts file add the function trackByFn, which returns the (unique) index of the value:

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

This is a link about the same issue, except the issue is for AngularJS, but the problem corresponds yours. Most important excerpt from that page:

You are repeating over an array and you are changing the items of the array (note that your items are strings, which are primitives in JS and thus compared "by value"). Since new items are detected, old elements are removed from the DOM and new ones are created (which obviously don't get focus).

With TrackBy Angular can track which items have been added (or removed) according to the unique identifier and create or destroy only the things that changed which means you don't lose focus on your input field :)

As seen in the link you can also modify your array to contain objects which are unique and use [(ngModel)]="value.id" for example, but that's maybe not what you need.

这篇关于Angular2 动态输入字段在输入更改时失去焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！